<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>inner style</title>
    <style type="text/css">
      html,
      body {
        margin: 0;
        padding: 0;
      }
      #wrap {
        height: 100%;
      }
      html,
      body,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      li {
        margin: 0px;
        padding: 0px;
        font: 14px "微软雅黑";
      }
      a {
        text-decoration: none;
        display: block;
      }
      li {
        list-style: none;
      }
      img {
        display: block;
      }
      /*css reset 结束*/

      /*common css 开始*/
      .clearfix {
        *zoom: 1;
      }
      .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
      .commonTitle {
        color: #009ee0;
        font-size: 80px;
        line-height: 0.8;
        font-weight: bold;
        letter-spacing: -5px;
      }
      .commonText {
        color: white;
        line-height: 1.5;
        font-size: 15px;
      }
      /*common css 结束*/

      /*头部样式 开始*/
      #head {
        background: white !important;
        width: 100%;
      }
      #head .headMain {
        width: 1100px;
        height: 80px;
        margin: 0 auto;
        position: relative;
      }
      #head .headMain > .logo {
        float: left;
        margin-top: 30px;
      }
      #head .headMain > .nav {
        float: right;
        margin-top: 50px;
      }
      #head .headMain > .nav > .list > li {
        float: left;
        margin-left: 40px;
        position: relative;
      }
      #head .headMain > .nav > .list > li .up {
        color: #000000;
        position: absolute;
        width: 0;
        overflow: hidden;
        transition: 1s width;
      }
      #head .headMain > .nav > .list > li:hover .up {
        width: 100%;
      }

      /*头部样式 结束*/

      /*内容区样式 开始*/
      #content {
        background: gray;
        position: relative;
        overflow: hidden;
        width: 100%;
      }
      #content > .list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transition: 1s top;
      }
      #content > .list > li {
        position: relative;
        background-position: 50% 50% !important;
        overflow: hidden;
      }
      #content > .list > li > section {
        width: 1100px;
        height: 520px;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
      /*第三屏 start*/
      #content > .list > .works .works1 {
        margin: 50px 0px 100px 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 {
        margin-left: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 > .item {
        float: left;
        width: 220px;
        height: 133px;
        margin: 0 1px;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .works .works2 > .item:last-of-type {
        width: 332px;
      }

      #content > .list > .works .works2 > .item .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        padding: 10px;
        background: #000000;
        opacity: 0;
        color: white;
        transition: 1s opacity;
      }
      #content > .list > .works .works2 > .item .mask .icon {
        width: 32px;
        height: 34px;
        margin: 0 auto;
        margin-top: 10px;
        transition: 1s background-position;
      }
      #content > .list > .works .works2 > .item img {
        transition: 1s transform;
      }

      #content > .list > .works .works2 > .item .mask .icon:hover {
        background-position: 0 -35px;
      }
      #content > .list > .works .works2 > .item:hover .mask {
        opacity: 0.8;
      }
      #content > .list > .works .works2 > .item:hover img {
        transform: rotate(30deg) scale(1.5);
      }

      @keyframes works3Move {
        0% {
          transform: translateX(0px) rotateY(0deg);
        }
        49% {
          transform: translateX(-490px) rotateY(0deg);
        }
        50% {
          transform: translateX(-500px) rotateY(180deg);
        }
        100% {
          transform: translateX(0px) rotateY(180deg);
        }
      }
      /*第三屏 end*/

      /*第二屏 start*/
      #content > .list > .course .course1 {
        margin: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course2 {
        margin-left: 50px;
        width: 400px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course3 {
        width: 480px;
        position: absolute;
        z-index: 2;
        right: 50px;
        top: 70px;
      }

      #content > .list > .course .course3 .line {
        position: absolute;
        top: -7px;
        width: 9px;
        height: 410px;
      }

      #content > .list > .course .course3 .line:nth-of-type(1) {
        left: -5px;
      }
      #content > .list > .course .course3 .line:nth-of-type(2) {
        left: 115px;
      }
      #content > .list > .course .course3 .line:nth-of-type(3) {
        left: 235px;
      }
      #content > .list > .course .course3 .line:nth-of-type(4) {
        left: 355px;
      }
      #content > .list > .course .course3 .line:nth-of-type(5) {
        left: 475px;
      }

      #content > .list > .course .course3 .item {
        float: left;
        width: 120px;
        height: 132px;
        position: relative;
        perspective: 500px;
        transform-style: preserve-3d;
      }
      #content > .list > .course .course3 .item .face,
      #content > .list > .course .course3 .item .backFace {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 15px;
        transition: 1s transform;
      }

      #content > .list > .course .course3 .item .backFace {
        background-position: 50% 50% !important;
      }

      #content > .list > .course .course3 .item:hover .face {
        transform: rotateY(360deg);
      }
      #content > .list > .course .course3 .item:hover .backFace {
        transform: rotateY(180deg);
      }
      /*第二屏 end*/

      /*第一屏 start*/
      #content > .list > .home .home1 {
        width: 100%;
        height: 100%;
        perspective: 1000px;
        transform-style: preserve-3d;
      }
      #content > .list > .home .home1 > li {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        visibility: hidden;
      }
      #content > .list > .home .home1 > li:nth-child(1) {
        background: #dc6c5f;
      }
      #content > .list > .home .home1 > li:nth-child(2) {
        background: #95dc84;
      }
      #content > .list > .home .home1 > li:nth-child(3) {
        background: #64b9d2;
      }
      #content > .list > .home .home1 > li:nth-child(4) {
        background: #000000;
      }
      #content > .list > .home .home1 > li > div {
        color: white;
        text-align: center;
        margin-top: 200px;
      }
      #content > .list > .home .home1 > li.active {
        visibility: visible;
      }

      #content > .list > .home .home2 {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
      }
      #content > .list > .home .home2 > li {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.5);
        display: inline-block;
        box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
        cursor: pointer;
      }
      #content > .list > .home .home2 > li.active {
        background: white;
        cursor: default;
      }

      /*从左往右 leftHide  rightShow*/
      #content > .list > .home .home1 > li.leftHide {
        visibility: hidden;
        animation: 1s leftHide 1 linear;
      }
      #content > .list > .home .home1 > li.rightShow {
        visibility: visible;
        animation: 1s rightShow 1 linear;
      }
      @keyframes leftHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }
      @keyframes rightShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
        }
      }
      /*从右往左 leftShow  rightHide*/
      #content > .list > .home .home1 > li.leftShow {
        visibility: visible;
        animation: 1s leftShow 1 linear;
      }
      #content > .list > .home .home1 > li.rightHide {
        visibility: hidden;
        animation: 1s rightHide 1 linear;
      }
      @keyframes leftShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
        }
      }
      @keyframes rightHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }

      /*第一屏 end*/
      /*第四屏 strat*/
      #content > .list > .about .about1 {
        margin: 50px 0 100px 50px;
      }
      #content > .list > .about .about2 {
        margin-left: 50px;
        width: 400px;
      }
      #content > .list > .about .about3 > .item {
        width: 260px;
        height: 200px;
        border: 5px solid rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        position: absolute;
        z-index: 2;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item:nth-child(1) {
        left: 750px;
        top: 50px;
      }
      #content > .list > .about .about3 > .item:nth-child(2) {
        left: 600px;
        top: 290px;
      }

      #content > .list > .about .about3 > .item > span,
      #content > .list > .about .about3 > .item > ul {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      #content > .list > .about .about3 > .item:hover span {
        transform: scale(1);
      }

      #content > .list > .about .about3 > .item > ul > li {
        float: left;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item > ul > li > img {
        position: absolute;
        transition: 1s top, 1s left;
      }

      /*第四屏 end*/
      /*第五屏 strat*/
      #content > .list > .team .team1 {
        width: 400px;
        margin: 50px;
        float: left;
      }
      #content > .list > .team .team2 {
        width: 400px;
        margin: 50px;
        float: right;
      }
      #content > .list > .team .team3 {
        width: 944px;
        height: 448px;
        position: absolute;
        left: 50%;
        margin-left: -472px;
        top: 250px;
      }
      #content > .list > .team .team3 ul {
        position: relative;
        height: 100%;
      }
      #content > .list > .team .team3 ul > li:nth-child(1) {
        background-position: 0, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(2) {
        background-position: -118px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(3) {
        background-position: -236px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(4) {
        background-position: -354px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(5) {
        background-position: -472px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(6) {
        background-position: -590px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(7) {
        background-position: -708px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(8) {
        background-position: -826px, 0;
      }
      #content > .list > .team canvas {
        position: absolute;
        top: 0px;
      }

      /*第五屏 end*/

      /*小圆点*/
      #content > .dot {
        position: fixed;
        right: 10px;
        top: 50%;
      }
      #content > .dot > li {
        width: 10px;
        height: 10px;
        border: 5px solid pink;
        margin-top: 10px;
        border-radius: 50%;
      }
      #content > .dot > li.active {
        background: white;
      }

      /*内容区样式 结束*/

      /*出入场*/
      #content > .list > .home .home1,
      #content > .list > .home .home2 {
        transition: 1s transform, 1s opacity;
      }
      #content > .list > .about .about3 > .item,
      #content > .list > .team .team1,
      #content > .list > .team .team2 {
        transition: 1s transform;
      }

      /*音频*/

      /*开机动画*/
      #mask {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 100;
      }
      #mask .up {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
      }
      #mask .down {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
        position: absolute;
        bottom: 0;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      #wrap {
        height: 100%;
      }
      html,
      body,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      li {
        margin: 0px;
        padding: 0px;
        font: 14px "微软雅黑";
      }
      a {
        text-decoration: none;
        display: block;
      }
      li {
        list-style: none;
      }
      img {
        display: block;
      }
      /*css reset 结束*/

      /*common css 开始*/
      .clearfix {
        *zoom: 1;
      }
      .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
      .commonTitle {
        color: #009ee0;
        font-size: 80px;
        line-height: 0.8;
        font-weight: bold;
        letter-spacing: -5px;
      }
      .commonText {
        color: white;
        line-height: 1.5;
        font-size: 15px;
      }
      /*common css 结束*/

      /*头部样式 开始*/
      #head {
        background: white !important;
        width: 100%;
      }
      #head .headMain {
        width: 1100px;
        height: 80px;
        margin: 0 auto;
        position: relative;
      }
      #head .headMain > .logo {
        float: left;
        margin-top: 30px;
      }
      #head .headMain > .nav {
        float: right;
        margin-top: 50px;
      }
      #head .headMain > .nav > .list > li {
        float: left;
        margin-left: 40px;
        position: relative;
      }
      #head .headMain > .nav > .list > li .up {
        color: #000000;
        position: absolute;
        width: 0;
        overflow: hidden;
        transition: 1s width;
      }
      #head .headMain > .nav > .list > li:hover .up {
        width: 100%;
      }

      /*头部样式 结束*/

      /*内容区样式 开始*/
      #content {
        background: gray;
        position: relative;
        overflow: hidden;
        width: 100%;
      }
      #content > .list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transition: 1s top;
      }
      #content > .list > li {
        position: relative;
        background-position: 50% 50% !important;
        overflow: hidden;
      }
      #content > .list > li > section {
        width: 1100px;
        height: 520px;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
      /*第三屏 start*/
      #content > .list > .works .works1 {
        margin: 50px 0px 100px 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 {
        margin-left: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 > .item {
        float: left;
        width: 220px;
        height: 133px;
        margin: 0 1px;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .works .works2 > .item:last-of-type {
        width: 332px;
      }

      #content > .list > .works .works2 > .item .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        padding: 10px;
        background: #000000;
        opacity: 0;
        color: white;
        transition: 1s opacity;
      }
      #content > .list > .works .works2 > .item .mask .icon {
        width: 32px;
        height: 34px;
        margin: 0 auto;
        margin-top: 10px;
        transition: 1s background-position;
      }
      #content > .list > .works .works2 > .item img {
        transition: 1s transform;
      }

      #content > .list > .works .works2 > .item .mask .icon:hover {
        background-position: 0 -35px;
      }
      #content > .list > .works .works2 > .item:hover .mask {
        opacity: 0.8;
      }
      #content > .list > .works .works2 > .item:hover img {
        transform: rotate(30deg) scale(1.5);
      }

      @keyframes works3Move {
        0% {
          transform: translateX(0px) rotateY(0deg);
        }
        49% {
          transform: translateX(-490px) rotateY(0deg);
        }
        50% {
          transform: translateX(-500px) rotateY(180deg);
        }
        100% {
          transform: translateX(0px) rotateY(180deg);
        }
      }
      /*第三屏 end*/

      /*第二屏 start*/
      #content > .list > .course .course1 {
        margin: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course2 {
        margin-left: 50px;
        width: 400px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course3 {
        width: 480px;
        position: absolute;
        z-index: 2;
        right: 50px;
        top: 70px;
      }

      #content > .list > .course .course3 .line {
        position: absolute;
        top: -7px;
        width: 9px;
        height: 410px;
      }

      #content > .list > .course .course3 .line:nth-of-type(1) {
        left: -5px;
      }
      #content > .list > .course .course3 .line:nth-of-type(2) {
        left: 115px;
      }
      #content > .list > .course .course3 .line:nth-of-type(3) {
        left: 235px;
      }
      #content > .list > .course .course3 .line:nth-of-type(4) {
        left: 355px;
      }
      #content > .list > .course .course3 .line:nth-of-type(5) {
        left: 475px;
      }

      #content > .list > .course .course3 .item {
        float: left;
        width: 120px;
        height: 132px;
        position: relative;
        perspective: 500px;
        transform-style: preserve-3d;
      }
      #content > .list > .course .course3 .item .face,
      #content > .list > .course .course3 .item .backFace {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 15px;
        transition: 1s transform;
      }

      #content > .list > .course .course3 .item .backFace {
        background-position: 50% 50% !important;
      }

      #content > .list > .course .course3 .item:hover .face {
        transform: rotateY(360deg);
      }
      #content > .list > .course .course3 .item:hover .backFace {
        transform: rotateY(180deg);
      }
      /*第二屏 end*/

      /*第一屏 start*/
      #content > .list > .home .home1 {
        width: 100%;
        height: 100%;
        perspective: 1000px;
        transform-style: preserve-3d;
      }
      #content > .list > .home .home1 > li {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        visibility: hidden;
      }
      #content > .list > .home .home1 > li:nth-child(1) {
        background: #dc6c5f;
      }
      #content > .list > .home .home1 > li:nth-child(2) {
        background: #95dc84;
      }
      #content > .list > .home .home1 > li:nth-child(3) {
        background: #64b9d2;
      }
      #content > .list > .home .home1 > li:nth-child(4) {
        background: #000000;
      }
      #content > .list > .home .home1 > li > div {
        color: white;
        text-align: center;
        margin-top: 200px;
      }
      #content > .list > .home .home1 > li.active {
        visibility: visible;
      }

      #content > .list > .home .home2 {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
      }
      #content > .list > .home .home2 > li {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.5);
        display: inline-block;
        box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
        cursor: pointer;
      }
      #content > .list > .home .home2 > li.active {
        background: white;
        cursor: default;
      }

      /*从左往右 leftHide  rightShow*/
      #content > .list > .home .home1 > li.leftHide {
        visibility: hidden;
        animation: 1s leftHide 1 linear;
      }
      #content > .list > .home .home1 > li.rightShow {
        visibility: visible;
        animation: 1s rightShow 1 linear;
      }
      @keyframes leftHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }
      @keyframes rightShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
        }
      }
      /*从右往左 leftShow  rightHide*/
      #content > .list > .home .home1 > li.leftShow {
        visibility: visible;
        animation: 1s leftShow 1 linear;
      }
      #content > .list > .home .home1 > li.rightHide {
        visibility: hidden;
        animation: 1s rightHide 1 linear;
      }
      @keyframes leftShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
        }
      }
      @keyframes rightHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }

      /*第一屏 end*/
      /*第四屏 strat*/
      #content > .list > .about .about1 {
        margin: 50px 0 100px 50px;
      }
      #content > .list > .about .about2 {
        margin-left: 50px;
        width: 400px;
      }
      #content > .list > .about .about3 > .item {
        width: 260px;
        height: 200px;
        border: 5px solid rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        position: absolute;
        z-index: 2;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item:nth-child(1) {
        left: 750px;
        top: 50px;
      }
      #content > .list > .about .about3 > .item:nth-child(2) {
        left: 600px;
        top: 290px;
      }

      #content > .list > .about .about3 > .item > span,
      #content > .list > .about .about3 > .item > ul {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      #content > .list > .about .about3 > .item:hover span {
        transform: scale(1);
      }

      #content > .list > .about .about3 > .item > ul > li {
        float: left;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item > ul > li > img {
        position: absolute;
        transition: 1s top, 1s left;
      }

      /*第四屏 end*/
      /*第五屏 strat*/
      #content > .list > .team .team1 {
        width: 400px;
        margin: 50px;
        float: left;
      }
      #content > .list > .team .team2 {
        width: 400px;
        margin: 50px;
        float: right;
      }
      #content > .list > .team .team3 {
        width: 944px;
        height: 448px;
        position: absolute;
        left: 50%;
        margin-left: -472px;
        top: 250px;
      }
      #content > .list > .team .team3 ul {
        position: relative;
        height: 100%;
      }
      #content > .list > .team .team3 ul > li:nth-child(1) {
        background-position: 0, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(2) {
        background-position: -118px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(3) {
        background-position: -236px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(4) {
        background-position: -354px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(5) {
        background-position: -472px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(6) {
        background-position: -590px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(7) {
        background-position: -708px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(8) {
        background-position: -826px, 0;
      }
      #content > .list > .team canvas {
        position: absolute;
        top: 0px;
      }

      /*第五屏 end*/

      /*小圆点*/
      #content > .dot {
        position: fixed;
        right: 10px;
        top: 50%;
      }
      #content > .dot > li {
        width: 10px;
        height: 10px;
        border: 5px solid pink;
        margin-top: 10px;
        border-radius: 50%;
      }
      #content > .dot > li.active {
        background: white;
      }

      /*内容区样式 结束*/

      /*出入场*/
      #content > .list > .home .home1,
      #content > .list > .home .home2 {
        transition: 1s transform, 1s opacity;
      }
      #content > .list > .about .about3 > .item,
      #content > .list > .team .team1,
      #content > .list > .team .team2 {
        transition: 1s transform;
      }

      /*音频*/

      /*开机动画*/
      #mask {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 100;
      }
      #mask .up {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
      }
      #mask .down {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
        position: absolute;
        bottom: 0;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      #wrap {
        height: 100%;
      }
      html,
      body,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      li {
        margin: 0px;
        padding: 0px;
        font: 14px "微软雅黑";
      }
      a {
        text-decoration: none;
        display: block;
      }
      li {
        list-style: none;
      }
      img {
        display: block;
      }
      /*css reset 结束*/

      /*common css 开始*/
      .clearfix {
        *zoom: 1;
      }
      .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
      .commonTitle {
        color: #009ee0;
        font-size: 80px;
        line-height: 0.8;
        font-weight: bold;
        letter-spacing: -5px;
      }
      .commonText {
        color: white;
        line-height: 1.5;
        font-size: 15px;
      }
      /*common css 结束*/

      /*头部样式 开始*/
      #head {
        background: white !important;
        width: 100%;
      }
      #head .headMain {
        width: 1100px;
        height: 80px;
        margin: 0 auto;
        position: relative;
      }
      #head .headMain > .logo {
        float: left;
        margin-top: 30px;
      }
      #head .headMain > .nav {
        float: right;
        margin-top: 50px;
      }
      #head .headMain > .nav > .list > li {
        float: left;
        margin-left: 40px;
        position: relative;
      }
      #head .headMain > .nav > .list > li .up {
        color: #000000;
        position: absolute;
        width: 0;
        overflow: hidden;
        transition: 1s width;
      }
      #head .headMain > .nav > .list > li:hover .up {
        width: 100%;
      }

      /*头部样式 结束*/

      /*内容区样式 开始*/
      #content {
        background: gray;
        position: relative;
        overflow: hidden;
        width: 100%;
      }
      #content > .list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transition: 1s top;
      }
      #content > .list > li {
        position: relative;
        background-position: 50% 50% !important;
        overflow: hidden;
      }
      #content > .list > li > section {
        width: 1100px;
        height: 520px;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
      /*第三屏 start*/
      #content > .list > .works .works1 {
        margin: 50px 0px 100px 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 {
        margin-left: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 > .item {
        float: left;
        width: 220px;
        height: 133px;
        margin: 0 1px;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .works .works2 > .item:last-of-type {
        width: 332px;
      }

      #content > .list > .works .works2 > .item .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        padding: 10px;
        background: #000000;
        opacity: 0;
        color: white;
        transition: 1s opacity;
      }
      #content > .list > .works .works2 > .item .mask .icon {
        width: 32px;
        height: 34px;
        margin: 0 auto;
        margin-top: 10px;
        transition: 1s background-position;
      }
      #content > .list > .works .works2 > .item img {
        transition: 1s transform;
      }

      #content > .list > .works .works2 > .item .mask .icon:hover {
        background-position: 0 -35px;
      }
      #content > .list > .works .works2 > .item:hover .mask {
        opacity: 0.8;
      }
      #content > .list > .works .works2 > .item:hover img {
        transform: rotate(30deg) scale(1.5);
      }

      @keyframes works3Move {
        0% {
          transform: translateX(0px) rotateY(0deg);
        }
        49% {
          transform: translateX(-490px) rotateY(0deg);
        }
        50% {
          transform: translateX(-500px) rotateY(180deg);
        }
        100% {
          transform: translateX(0px) rotateY(180deg);
        }
      }
      /*第三屏 end*/

      /*第二屏 start*/
      #content > .list > .course .course1 {
        margin: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course2 {
        margin-left: 50px;
        width: 400px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course3 {
        width: 480px;
        position: absolute;
        z-index: 2;
        right: 50px;
        top: 70px;
      }

      #content > .list > .course .course3 .line {
        position: absolute;
        top: -7px;
        width: 9px;
        height: 410px;
      }

      #content > .list > .course .course3 .line:nth-of-type(1) {
        left: -5px;
      }
      #content > .list > .course .course3 .line:nth-of-type(2) {
        left: 115px;
      }
      #content > .list > .course .course3 .line:nth-of-type(3) {
        left: 235px;
      }
      #content > .list > .course .course3 .line:nth-of-type(4) {
        left: 355px;
      }
      #content > .list > .course .course3 .line:nth-of-type(5) {
        left: 475px;
      }

      #content > .list > .course .course3 .item {
        float: left;
        width: 120px;
        height: 132px;
        position: relative;
        perspective: 500px;
        transform-style: preserve-3d;
      }
      #content > .list > .course .course3 .item .face,
      #content > .list > .course .course3 .item .backFace {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 15px;
        transition: 1s transform;
      }

      #content > .list > .course .course3 .item .backFace {
        background-position: 50% 50% !important;
      }

      #content > .list > .course .course3 .item:hover .face {
        transform: rotateY(360deg);
      }
      #content > .list > .course .course3 .item:hover .backFace {
        transform: rotateY(180deg);
      }
      /*第二屏 end*/

      /*第一屏 start*/
      #content > .list > .home .home1 {
        width: 100%;
        height: 100%;
        perspective: 1000px;
        transform-style: preserve-3d;
      }
      #content > .list > .home .home1 > li {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        visibility: hidden;
      }
      #content > .list > .home .home1 > li:nth-child(1) {
        background: #dc6c5f;
      }
      #content > .list > .home .home1 > li:nth-child(2) {
        background: #95dc84;
      }
      #content > .list > .home .home1 > li:nth-child(3) {
        background: #64b9d2;
      }
      #content > .list > .home .home1 > li:nth-child(4) {
        background: #000000;
      }
      #content > .list > .home .home1 > li > div {
        color: white;
        text-align: center;
        margin-top: 200px;
      }
      #content > .list > .home .home1 > li.active {
        visibility: visible;
      }

      #content > .list > .home .home2 {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
      }
      #content > .list > .home .home2 > li {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.5);
        display: inline-block;
        box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
        cursor: pointer;
      }
      #content > .list > .home .home2 > li.active {
        background: white;
        cursor: default;
      }

      /*从左往右 leftHide  rightShow*/
      #content > .list > .home .home1 > li.leftHide {
        visibility: hidden;
        animation: 1s leftHide 1 linear;
      }
      #content > .list > .home .home1 > li.rightShow {
        visibility: visible;
        animation: 1s rightShow 1 linear;
      }
      @keyframes leftHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }
      @keyframes rightShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
        }
      }
      /*从右往左 leftShow  rightHide*/
      #content > .list > .home .home1 > li.leftShow {
        visibility: visible;
        animation: 1s leftShow 1 linear;
      }
      #content > .list > .home .home1 > li.rightHide {
        visibility: hidden;
        animation: 1s rightHide 1 linear;
      }
      @keyframes leftShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
        }
      }
      @keyframes rightHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }

      /*第一屏 end*/
      /*第四屏 strat*/
      #content > .list > .about .about1 {
        margin: 50px 0 100px 50px;
      }
      #content > .list > .about .about2 {
        margin-left: 50px;
        width: 400px;
      }
      #content > .list > .about .about3 > .item {
        width: 260px;
        height: 200px;
        border: 5px solid rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        position: absolute;
        z-index: 2;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item:nth-child(1) {
        left: 750px;
        top: 50px;
      }
      #content > .list > .about .about3 > .item:nth-child(2) {
        left: 600px;
        top: 290px;
      }

      #content > .list > .about .about3 > .item > span,
      #content > .list > .about .about3 > .item > ul {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      #content > .list > .about .about3 > .item:hover span {
        transform: scale(1);
      }

      #content > .list > .about .about3 > .item > ul > li {
        float: left;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item > ul > li > img {
        position: absolute;
        transition: 1s top, 1s left;
      }

      /*第四屏 end*/
      /*第五屏 strat*/
      #content > .list > .team .team1 {
        width: 400px;
        margin: 50px;
        float: left;
      }
      #content > .list > .team .team2 {
        width: 400px;
        margin: 50px;
        float: right;
      }
      #content > .list > .team .team3 {
        width: 944px;
        height: 448px;
        position: absolute;
        left: 50%;
        margin-left: -472px;
        top: 250px;
      }
      #content > .list > .team .team3 ul {
        position: relative;
        height: 100%;
      }
      #content > .list > .team .team3 ul > li:nth-child(1) {
        background-position: 0, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(2) {
        background-position: -118px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(3) {
        background-position: -236px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(4) {
        background-position: -354px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(5) {
        background-position: -472px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(6) {
        background-position: -590px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(7) {
        background-position: -708px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(8) {
        background-position: -826px, 0;
      }
      #content > .list > .team canvas {
        position: absolute;
        top: 0px;
      }

      /*第五屏 end*/

      /*小圆点*/
      #content > .dot {
        position: fixed;
        right: 10px;
        top: 50%;
      }
      #content > .dot > li {
        width: 10px;
        height: 10px;
        border: 5px solid pink;
        margin-top: 10px;
        border-radius: 50%;
      }
      #content > .dot > li.active {
        background: white;
      }

      /*内容区样式 结束*/

      /*出入场*/
      #content > .list > .home .home1,
      #content > .list > .home .home2 {
        transition: 1s transform, 1s opacity;
      }
      #content > .list > .about .about3 > .item,
      #content > .list > .team .team1,
      #content > .list > .team .team2 {
        transition: 1s transform;
      }

      /*音频*/

      /*开机动画*/
      #mask {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 100;
      }
      #mask .up {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
      }
      #mask .down {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
        position: absolute;
        bottom: 0;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      #wrap {
        height: 100%;
      }
      html,
      body,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      li {
        margin: 0px;
        padding: 0px;
        font: 14px "微软雅黑";
      }
      a {
        text-decoration: none;
        display: block;
      }
      li {
        list-style: none;
      }
      img {
        display: block;
      }
      /*css reset 结束*/

      /*common css 开始*/
      .clearfix {
        *zoom: 1;
      }
      .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
      .commonTitle {
        color: #009ee0;
        font-size: 80px;
        line-height: 0.8;
        font-weight: bold;
        letter-spacing: -5px;
      }
      .commonText {
        color: white;
        line-height: 1.5;
        font-size: 15px;
      }
      /*common css 结束*/

      /*头部样式 开始*/
      #head {
        background: white !important;
        width: 100%;
      }
      #head .headMain {
        width: 1100px;
        height: 80px;
        margin: 0 auto;
        position: relative;
      }
      #head .headMain > .logo {
        float: left;
        margin-top: 30px;
      }
      #head .headMain > .nav {
        float: right;
        margin-top: 50px;
      }
      #head .headMain > .nav > .list > li {
        float: left;
        margin-left: 40px;
        position: relative;
      }
      #head .headMain > .nav > .list > li .up {
        color: #000000;
        position: absolute;
        width: 0;
        overflow: hidden;
        transition: 1s width;
      }
      #head .headMain > .nav > .list > li:hover .up {
        width: 100%;
      }

      /*头部样式 结束*/

      /*内容区样式 开始*/
      #content {
        background: gray;
        position: relative;
        overflow: hidden;
        width: 100%;
      }
      #content > .list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transition: 1s top;
      }
      #content > .list > li {
        position: relative;
        background-position: 50% 50% !important;
        overflow: hidden;
      }
      #content > .list > li > section {
        width: 1100px;
        height: 520px;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
      /*第三屏 start*/
      #content > .list > .works .works1 {
        margin: 50px 0px 100px 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 {
        margin-left: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 > .item {
        float: left;
        width: 220px;
        height: 133px;
        margin: 0 1px;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .works .works2 > .item:last-of-type {
        width: 332px;
      }

      #content > .list > .works .works2 > .item .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        padding: 10px;
        background: #000000;
        opacity: 0;
        color: white;
        transition: 1s opacity;
      }
      #content > .list > .works .works2 > .item .mask .icon {
        width: 32px;
        height: 34px;
        margin: 0 auto;
        margin-top: 10px;
        transition: 1s background-position;
      }
      #content > .list > .works .works2 > .item img {
        transition: 1s transform;
      }

      #content > .list > .works .works2 > .item .mask .icon:hover {
        background-position: 0 -35px;
      }
      #content > .list > .works .works2 > .item:hover .mask {
        opacity: 0.8;
      }
      #content > .list > .works .works2 > .item:hover img {
        transform: rotate(30deg) scale(1.5);
      }

      @keyframes works3Move {
        0% {
          transform: translateX(0px) rotateY(0deg);
        }
        49% {
          transform: translateX(-490px) rotateY(0deg);
        }
        50% {
          transform: translateX(-500px) rotateY(180deg);
        }
        100% {
          transform: translateX(0px) rotateY(180deg);
        }
      }
      /*第三屏 end*/

      /*第二屏 start*/
      #content > .list > .course .course1 {
        margin: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course2 {
        margin-left: 50px;
        width: 400px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course3 {
        width: 480px;
        position: absolute;
        z-index: 2;
        right: 50px;
        top: 70px;
      }

      #content > .list > .course .course3 .line {
        position: absolute;
        top: -7px;
        width: 9px;
        height: 410px;
      }

      #content > .list > .course .course3 .line:nth-of-type(1) {
        left: -5px;
      }
      #content > .list > .course .course3 .line:nth-of-type(2) {
        left: 115px;
      }
      #content > .list > .course .course3 .line:nth-of-type(3) {
        left: 235px;
      }
      #content > .list > .course .course3 .line:nth-of-type(4) {
        left: 355px;
      }
      #content > .list > .course .course3 .line:nth-of-type(5) {
        left: 475px;
      }

      #content > .list > .course .course3 .item {
        float: left;
        width: 120px;
        height: 132px;
        position: relative;
        perspective: 500px;
        transform-style: preserve-3d;
      }
      #content > .list > .course .course3 .item .face,
      #content > .list > .course .course3 .item .backFace {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 15px;
        transition: 1s transform;
      }

      #content > .list > .course .course3 .item .backFace {
        background-position: 50% 50% !important;
      }

      #content > .list > .course .course3 .item:hover .face {
        transform: rotateY(360deg);
      }
      #content > .list > .course .course3 .item:hover .backFace {
        transform: rotateY(180deg);
      }
      /*第二屏 end*/

      /*第一屏 start*/
      #content > .list > .home .home1 {
        width: 100%;
        height: 100%;
        perspective: 1000px;
        transform-style: preserve-3d;
      }
      #content > .list > .home .home1 > li {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        visibility: hidden;
      }
      #content > .list > .home .home1 > li:nth-child(1) {
        background: #dc6c5f;
      }
      #content > .list > .home .home1 > li:nth-child(2) {
        background: #95dc84;
      }
      #content > .list > .home .home1 > li:nth-child(3) {
        background: #64b9d2;
      }
      #content > .list > .home .home1 > li:nth-child(4) {
        background: #000000;
      }
      #content > .list > .home .home1 > li > div {
        color: white;
        text-align: center;
        margin-top: 200px;
      }
      #content > .list > .home .home1 > li.active {
        visibility: visible;
      }

      #content > .list > .home .home2 {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
      }
      #content > .list > .home .home2 > li {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.5);
        display: inline-block;
        box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
        cursor: pointer;
      }
      #content > .list > .home .home2 > li.active {
        background: white;
        cursor: default;
      }

      /*从左往右 leftHide  rightShow*/
      #content > .list > .home .home1 > li.leftHide {
        visibility: hidden;
        animation: 1s leftHide 1 linear;
      }
      #content > .list > .home .home1 > li.rightShow {
        visibility: visible;
        animation: 1s rightShow 1 linear;
      }
      @keyframes leftHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }
      @keyframes rightShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
        }
      }
      /*从右往左 leftShow  rightHide*/
      #content > .list > .home .home1 > li.leftShow {
        visibility: visible;
        animation: 1s leftShow 1 linear;
      }
      #content > .list > .home .home1 > li.rightHide {
        visibility: hidden;
        animation: 1s rightHide 1 linear;
      }
      @keyframes leftShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
        }
      }
      @keyframes rightHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }

      /*第一屏 end*/
      /*第四屏 strat*/
      #content > .list > .about .about1 {
        margin: 50px 0 100px 50px;
      }
      #content > .list > .about .about2 {
        margin-left: 50px;
        width: 400px;
      }
      #content > .list > .about .about3 > .item {
        width: 260px;
        height: 200px;
        border: 5px solid rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        position: absolute;
        z-index: 2;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item:nth-child(1) {
        left: 750px;
        top: 50px;
      }
      #content > .list > .about .about3 > .item:nth-child(2) {
        left: 600px;
        top: 290px;
      }

      #content > .list > .about .about3 > .item > span,
      #content > .list > .about .about3 > .item > ul {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      #content > .list > .about .about3 > .item:hover span {
        transform: scale(1);
      }

      #content > .list > .about .about3 > .item > ul > li {
        float: left;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item > ul > li > img {
        position: absolute;
        transition: 1s top, 1s left;
      }

      /*第四屏 end*/
      /*第五屏 strat*/
      #content > .list > .team .team1 {
        width: 400px;
        margin: 50px;
        float: left;
      }
      #content > .list > .team .team2 {
        width: 400px;
        margin: 50px;
        float: right;
      }
      #content > .list > .team .team3 {
        width: 944px;
        height: 448px;
        position: absolute;
        left: 50%;
        margin-left: -472px;
        top: 250px;
      }
      #content > .list > .team .team3 ul {
        position: relative;
        height: 100%;
      }
      #content > .list > .team .team3 ul > li:nth-child(1) {
        background-position: 0, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(2) {
        background-position: -118px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(3) {
        background-position: -236px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(4) {
        background-position: -354px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(5) {
        background-position: -472px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(6) {
        background-position: -590px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(7) {
        background-position: -708px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(8) {
        background-position: -826px, 0;
      }
      #content > .list > .team canvas {
        position: absolute;
        top: 0px;
      }

      /*第五屏 end*/

      /*小圆点*/
      #content > .dot {
        position: fixed;
        right: 10px;
        top: 50%;
      }
      #content > .dot > li {
        width: 10px;
        height: 10px;
        border: 5px solid pink;
        margin-top: 10px;
        border-radius: 50%;
      }
      #content > .dot > li.active {
        background: white;
      }

      /*内容区样式 结束*/

      /*出入场*/
      #content > .list > .home .home1,
      #content > .list > .home .home2 {
        transition: 1s transform, 1s opacity;
      }
      #content > .list > .about .about3 > .item,
      #content > .list > .team .team1,
      #content > .list > .team .team2 {
        transition: 1s transform;
      }

      /*音频*/

      /*开机动画*/
      #mask {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 100;
      }
      #mask .up {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
      }
      #mask .down {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
        position: absolute;
        bottom: 0;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      #wrap {
        height: 100%;
      }
      html,
      body,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      li {
        margin: 0px;
        padding: 0px;
        font: 14px "微软雅黑";
      }
      a {
        text-decoration: none;
        display: block;
      }
      li {
        list-style: none;
      }
      img {
        display: block;
      }
      /*css reset 结束*/

      /*common css 开始*/
      .clearfix {
        *zoom: 1;
      }
      .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
      .commonTitle {
        color: #009ee0;
        font-size: 80px;
        line-height: 0.8;
        font-weight: bold;
        letter-spacing: -5px;
      }
      .commonText {
        color: white;
        line-height: 1.5;
        font-size: 15px;
      }
      /*common css 结束*/

      /*头部样式 开始*/
      #head {
        background: white !important;
        width: 100%;
      }
      #head .headMain {
        width: 1100px;
        height: 80px;
        margin: 0 auto;
        position: relative;
      }
      #head .headMain > .logo {
        float: left;
        margin-top: 30px;
      }
      #head .headMain > .nav {
        float: right;
        margin-top: 50px;
      }
      #head .headMain > .nav > .list > li {
        float: left;
        margin-left: 40px;
        position: relative;
      }
      #head .headMain > .nav > .list > li .up {
        color: #000000;
        position: absolute;
        width: 0;
        overflow: hidden;
        transition: 1s width;
      }
      #head .headMain > .nav > .list > li:hover .up {
        width: 100%;
      }

      /*头部样式 结束*/

      /*内容区样式 开始*/
      #content {
        background: gray;
        position: relative;
        overflow: hidden;
        width: 100%;
      }
      #content > .list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transition: 1s top;
      }
      #content > .list > li {
        position: relative;
        background-position: 50% 50% !important;
        overflow: hidden;
      }
      #content > .list > li > section {
        width: 1100px;
        height: 520px;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
      /*第三屏 start*/
      #content > .list > .works .works1 {
        margin: 50px 0px 100px 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 {
        margin-left: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 > .item {
        float: left;
        width: 220px;
        height: 133px;
        margin: 0 1px;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .works .works2 > .item:last-of-type {
        width: 332px;
      }

      #content > .list > .works .works2 > .item .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        padding: 10px;
        background: #000000;
        opacity: 0;
        color: white;
        transition: 1s opacity;
      }
      #content > .list > .works .works2 > .item .mask .icon {
        width: 32px;
        height: 34px;
        margin: 0 auto;
        margin-top: 10px;
        transition: 1s background-position;
      }
      #content > .list > .works .works2 > .item img {
        transition: 1s transform;
      }

      #content > .list > .works .works2 > .item .mask .icon:hover {
        background-position: 0 -35px;
      }
      #content > .list > .works .works2 > .item:hover .mask {
        opacity: 0.8;
      }
      #content > .list > .works .works2 > .item:hover img {
        transform: rotate(30deg) scale(1.5);
      }

      @keyframes works3Move {
        0% {
          transform: translateX(0px) rotateY(0deg);
        }
        49% {
          transform: translateX(-490px) rotateY(0deg);
        }
        50% {
          transform: translateX(-500px) rotateY(180deg);
        }
        100% {
          transform: translateX(0px) rotateY(180deg);
        }
      }
      /*第三屏 end*/

      /*第二屏 start*/
      #content > .list > .course .course1 {
        margin: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course2 {
        margin-left: 50px;
        width: 400px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course3 {
        width: 480px;
        position: absolute;
        z-index: 2;
        right: 50px;
        top: 70px;
      }

      #content > .list > .course .course3 .line {
        position: absolute;
        top: -7px;
        width: 9px;
        height: 410px;
      }

      #content > .list > .course .course3 .line:nth-of-type(1) {
        left: -5px;
      }
      #content > .list > .course .course3 .line:nth-of-type(2) {
        left: 115px;
      }
      #content > .list > .course .course3 .line:nth-of-type(3) {
        left: 235px;
      }
      #content > .list > .course .course3 .line:nth-of-type(4) {
        left: 355px;
      }
      #content > .list > .course .course3 .line:nth-of-type(5) {
        left: 475px;
      }

      #content > .list > .course .course3 .item {
        float: left;
        width: 120px;
        height: 132px;
        position: relative;
        perspective: 500px;
        transform-style: preserve-3d;
      }
      #content > .list > .course .course3 .item .face,
      #content > .list > .course .course3 .item .backFace {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 15px;
        transition: 1s transform;
      }

      #content > .list > .course .course3 .item .backFace {
        background-position: 50% 50% !important;
      }

      #content > .list > .course .course3 .item:hover .face {
        transform: rotateY(360deg);
      }
      #content > .list > .course .course3 .item:hover .backFace {
        transform: rotateY(180deg);
      }
      /*第二屏 end*/

      /*第一屏 start*/
      #content > .list > .home .home1 {
        width: 100%;
        height: 100%;
        perspective: 1000px;
        transform-style: preserve-3d;
      }
      #content > .list > .home .home1 > li {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        visibility: hidden;
      }
      #content > .list > .home .home1 > li:nth-child(1) {
        background: #dc6c5f;
      }
      #content > .list > .home .home1 > li:nth-child(2) {
        background: #95dc84;
      }
      #content > .list > .home .home1 > li:nth-child(3) {
        background: #64b9d2;
      }
      #content > .list > .home .home1 > li:nth-child(4) {
        background: #000000;
      }
      #content > .list > .home .home1 > li > div {
        color: white;
        text-align: center;
        margin-top: 200px;
      }
      #content > .list > .home .home1 > li.active {
        visibility: visible;
      }

      #content > .list > .home .home2 {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
      }
      #content > .list > .home .home2 > li {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.5);
        display: inline-block;
        box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
        cursor: pointer;
      }
      #content > .list > .home .home2 > li.active {
        background: white;
        cursor: default;
      }

      /*从左往右 leftHide  rightShow*/
      #content > .list > .home .home1 > li.leftHide {
        visibility: hidden;
        animation: 1s leftHide 1 linear;
      }
      #content > .list > .home .home1 > li.rightShow {
        visibility: visible;
        animation: 1s rightShow 1 linear;
      }
      @keyframes leftHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }
      @keyframes rightShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
        }
      }
      /*从右往左 leftShow  rightHide*/
      #content > .list > .home .home1 > li.leftShow {
        visibility: visible;
        animation: 1s leftShow 1 linear;
      }
      #content > .list > .home .home1 > li.rightHide {
        visibility: hidden;
        animation: 1s rightHide 1 linear;
      }
      @keyframes leftShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
        }
      }
      @keyframes rightHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }

      /*第一屏 end*/
      /*第四屏 strat*/
      #content > .list > .about .about1 {
        margin: 50px 0 100px 50px;
      }
      #content > .list > .about .about2 {
        margin-left: 50px;
        width: 400px;
      }
      #content > .list > .about .about3 > .item {
        width: 260px;
        height: 200px;
        border: 5px solid rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        position: absolute;
        z-index: 2;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item:nth-child(1) {
        left: 750px;
        top: 50px;
      }
      #content > .list > .about .about3 > .item:nth-child(2) {
        left: 600px;
        top: 290px;
      }

      #content > .list > .about .about3 > .item > span,
      #content > .list > .about .about3 > .item > ul {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      #content > .list > .about .about3 > .item:hover span {
        transform: scale(1);
      }

      #content > .list > .about .about3 > .item > ul > li {
        float: left;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item > ul > li > img {
        position: absolute;
        transition: 1s top, 1s left;
      }

      /*第四屏 end*/
      /*第五屏 strat*/
      #content > .list > .team .team1 {
        width: 400px;
        margin: 50px;
        float: left;
      }
      #content > .list > .team .team2 {
        width: 400px;
        margin: 50px;
        float: right;
      }
      #content > .list > .team .team3 {
        width: 944px;
        height: 448px;
        position: absolute;
        left: 50%;
        margin-left: -472px;
        top: 250px;
      }
      #content > .list > .team .team3 ul {
        position: relative;
        height: 100%;
      }
      #content > .list > .team .team3 ul > li:nth-child(1) {
        background-position: 0, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(2) {
        background-position: -118px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(3) {
        background-position: -236px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(4) {
        background-position: -354px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(5) {
        background-position: -472px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(6) {
        background-position: -590px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(7) {
        background-position: -708px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(8) {
        background-position: -826px, 0;
      }
      #content > .list > .team canvas {
        position: absolute;
        top: 0px;
      }

      /*第五屏 end*/

      /*小圆点*/
      #content > .dot {
        position: fixed;
        right: 10px;
        top: 50%;
      }
      #content > .dot > li {
        width: 10px;
        height: 10px;
        border: 5px solid pink;
        margin-top: 10px;
        border-radius: 50%;
      }
      #content > .dot > li.active {
        background: white;
      }

      /*内容区样式 结束*/

      /*出入场*/
      #content > .list > .home .home1,
      #content > .list > .home .home2 {
        transition: 1s transform, 1s opacity;
      }
      #content > .list > .about .about3 > .item,
      #content > .list > .team .team1,
      #content > .list > .team .team2 {
        transition: 1s transform;
      }

      /*音频*/

      /*开机动画*/
      #mask {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 100;
      }
      #mask .up {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
      }
      #mask .down {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
        position: absolute;
        bottom: 0;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      #wrap {
        height: 100%;
      }
      html,
      body,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      li {
        margin: 0px;
        padding: 0px;
        font: 14px "微软雅黑";
      }
      a {
        text-decoration: none;
        display: block;
      }
      li {
        list-style: none;
      }
      img {
        display: block;
      }
      /*css reset 结束*/

      /*common css 开始*/
      .clearfix {
        *zoom: 1;
      }
      .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
      .commonTitle {
        color: #009ee0;
        font-size: 80px;
        line-height: 0.8;
        font-weight: bold;
        letter-spacing: -5px;
      }
      .commonText {
        color: white;
        line-height: 1.5;
        font-size: 15px;
      }
      /*common css 结束*/

      /*头部样式 开始*/
      #head {
        background: white !important;
        width: 100%;
      }
      #head .headMain {
        width: 1100px;
        height: 80px;
        margin: 0 auto;
        position: relative;
      }
      #head .headMain > .logo {
        float: left;
        margin-top: 30px;
      }
      #head .headMain > .nav {
        float: right;
        margin-top: 50px;
      }
      #head .headMain > .nav > .list > li {
        float: left;
        margin-left: 40px;
        position: relative;
      }
      #head .headMain > .nav > .list > li .up {
        color: #000000;
        position: absolute;
        width: 0;
        overflow: hidden;
        transition: 1s width;
      }
      #head .headMain > .nav > .list > li:hover .up {
        width: 100%;
      }

      /*头部样式 结束*/

      /*内容区样式 开始*/
      #content {
        background: gray;
        position: relative;
        overflow: hidden;
        width: 100%;
      }
      #content > .list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transition: 1s top;
      }
      #content > .list > li {
        position: relative;
        background-position: 50% 50% !important;
        overflow: hidden;
      }
      #content > .list > li > section {
        width: 1100px;
        height: 520px;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
      /*第三屏 start*/
      #content > .list > .works .works1 {
        margin: 50px 0px 100px 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 {
        margin-left: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 > .item {
        float: left;
        width: 220px;
        height: 133px;
        margin: 0 1px;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .works .works2 > .item:last-of-type {
        width: 332px;
      }

      #content > .list > .works .works2 > .item .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        padding: 10px;
        background: #000000;
        opacity: 0;
        color: white;
        transition: 1s opacity;
      }
      #content > .list > .works .works2 > .item .mask .icon {
        width: 32px;
        height: 34px;
        margin: 0 auto;
        margin-top: 10px;
        transition: 1s background-position;
      }
      #content > .list > .works .works2 > .item img {
        transition: 1s transform;
      }

      #content > .list > .works .works2 > .item .mask .icon:hover {
        background-position: 0 -35px;
      }
      #content > .list > .works .works2 > .item:hover .mask {
        opacity: 0.8;
      }
      #content > .list > .works .works2 > .item:hover img {
        transform: rotate(30deg) scale(1.5);
      }

      @keyframes works3Move {
        0% {
          transform: translateX(0px) rotateY(0deg);
        }
        49% {
          transform: translateX(-490px) rotateY(0deg);
        }
        50% {
          transform: translateX(-500px) rotateY(180deg);
        }
        100% {
          transform: translateX(0px) rotateY(180deg);
        }
      }
      /*第三屏 end*/

      /*第二屏 start*/
      #content > .list > .course .course1 {
        margin: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course2 {
        margin-left: 50px;
        width: 400px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course3 {
        width: 480px;
        position: absolute;
        z-index: 2;
        right: 50px;
        top: 70px;
      }

      #content > .list > .course .course3 .line {
        position: absolute;
        top: -7px;
        width: 9px;
        height: 410px;
      }

      #content > .list > .course .course3 .line:nth-of-type(1) {
        left: -5px;
      }
      #content > .list > .course .course3 .line:nth-of-type(2) {
        left: 115px;
      }
      #content > .list > .course .course3 .line:nth-of-type(3) {
        left: 235px;
      }
      #content > .list > .course .course3 .line:nth-of-type(4) {
        left: 355px;
      }
      #content > .list > .course .course3 .line:nth-of-type(5) {
        left: 475px;
      }

      #content > .list > .course .course3 .item {
        float: left;
        width: 120px;
        height: 132px;
        position: relative;
        perspective: 500px;
        transform-style: preserve-3d;
      }
      #content > .list > .course .course3 .item .face,
      #content > .list > .course .course3 .item .backFace {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 15px;
        transition: 1s transform;
      }

      #content > .list > .course .course3 .item .backFace {
        background-position: 50% 50% !important;
      }

      #content > .list > .course .course3 .item:hover .face {
        transform: rotateY(360deg);
      }
      #content > .list > .course .course3 .item:hover .backFace {
        transform: rotateY(180deg);
      }
      /*第二屏 end*/

      /*第一屏 start*/
      #content > .list > .home .home1 {
        width: 100%;
        height: 100%;
        perspective: 1000px;
        transform-style: preserve-3d;
      }
      #content > .list > .home .home1 > li {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        visibility: hidden;
      }
      #content > .list > .home .home1 > li:nth-child(1) {
        background: #dc6c5f;
      }
      #content > .list > .home .home1 > li:nth-child(2) {
        background: #95dc84;
      }
      #content > .list > .home .home1 > li:nth-child(3) {
        background: #64b9d2;
      }
      #content > .list > .home .home1 > li:nth-child(4) {
        background: #000000;
      }
      #content > .list > .home .home1 > li > div {
        color: white;
        text-align: center;
        margin-top: 200px;
      }
      #content > .list > .home .home1 > li.active {
        visibility: visible;
      }

      #content > .list > .home .home2 {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
      }
      #content > .list > .home .home2 > li {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.5);
        display: inline-block;
        box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
        cursor: pointer;
      }
      #content > .list > .home .home2 > li.active {
        background: white;
        cursor: default;
      }

      /*从左往右 leftHide  rightShow*/
      #content > .list > .home .home1 > li.leftHide {
        visibility: hidden;
        animation: 1s leftHide 1 linear;
      }
      #content > .list > .home .home1 > li.rightShow {
        visibility: visible;
        animation: 1s rightShow 1 linear;
      }
      @keyframes leftHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }
      @keyframes rightShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
        }
      }
      /*从右往左 leftShow  rightHide*/
      #content > .list > .home .home1 > li.leftShow {
        visibility: visible;
        animation: 1s leftShow 1 linear;
      }
      #content > .list > .home .home1 > li.rightHide {
        visibility: hidden;
        animation: 1s rightHide 1 linear;
      }
      @keyframes leftShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
        }
      }
      @keyframes rightHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }

      /*第一屏 end*/
      /*第四屏 strat*/
      #content > .list > .about .about1 {
        margin: 50px 0 100px 50px;
      }
      #content > .list > .about .about2 {
        margin-left: 50px;
        width: 400px;
      }
      #content > .list > .about .about3 > .item {
        width: 260px;
        height: 200px;
        border: 5px solid rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        position: absolute;
        z-index: 2;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item:nth-child(1) {
        left: 750px;
        top: 50px;
      }
      #content > .list > .about .about3 > .item:nth-child(2) {
        left: 600px;
        top: 290px;
      }

      #content > .list > .about .about3 > .item > span,
      #content > .list > .about .about3 > .item > ul {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      #content > .list > .about .about3 > .item:hover span {
        transform: scale(1);
      }

      #content > .list > .about .about3 > .item > ul > li {
        float: left;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item > ul > li > img {
        position: absolute;
        transition: 1s top, 1s left;
      }

      /*第四屏 end*/
      /*第五屏 strat*/
      #content > .list > .team .team1 {
        width: 400px;
        margin: 50px;
        float: left;
      }
      #content > .list > .team .team2 {
        width: 400px;
        margin: 50px;
        float: right;
      }
      #content > .list > .team .team3 {
        width: 944px;
        height: 448px;
        position: absolute;
        left: 50%;
        margin-left: -472px;
        top: 250px;
      }
      #content > .list > .team .team3 ul {
        position: relative;
        height: 100%;
      }
      #content > .list > .team .team3 ul > li:nth-child(1) {
        background-position: 0, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(2) {
        background-position: -118px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(3) {
        background-position: -236px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(4) {
        background-position: -354px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(5) {
        background-position: -472px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(6) {
        background-position: -590px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(7) {
        background-position: -708px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(8) {
        background-position: -826px, 0;
      }
      #content > .list > .team canvas {
        position: absolute;
        top: 0px;
      }

      /*第五屏 end*/

      /*小圆点*/
      #content > .dot {
        position: fixed;
        right: 10px;
        top: 50%;
      }
      #content > .dot > li {
        width: 10px;
        height: 10px;
        border: 5px solid pink;
        margin-top: 10px;
        border-radius: 50%;
      }
      #content > .dot > li.active {
        background: white;
      }

      /*内容区样式 结束*/

      /*出入场*/
      #content > .list > .home .home1,
      #content > .list > .home .home2 {
        transition: 1s transform, 1s opacity;
      }
      #content > .list > .about .about3 > .item,
      #content > .list > .team .team1,
      #content > .list > .team .team2 {
        transition: 1s transform;
      }

      /*音频*/

      /*开机动画*/
      #mask {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 100;
      }
      #mask .up {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
      }
      #mask .down {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
        position: absolute;
        bottom: 0;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      #wrap {
        height: 100%;
      }
      html,
      body,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      li {
        margin: 0px;
        padding: 0px;
        font: 14px "微软雅黑";
      }
      a {
        text-decoration: none;
        display: block;
      }
      li {
        list-style: none;
      }
      img {
        display: block;
      }
      /*css reset 结束*/

      /*common css 开始*/
      .clearfix {
        *zoom: 1;
      }
      .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
      .commonTitle {
        color: #009ee0;
        font-size: 80px;
        line-height: 0.8;
        font-weight: bold;
        letter-spacing: -5px;
      }
      .commonText {
        color: white;
        line-height: 1.5;
        font-size: 15px;
      }
      /*common css 结束*/

      /*头部样式 开始*/
      #head {
        background: white !important;
        width: 100%;
      }
      #head .headMain {
        width: 1100px;
        height: 80px;
        margin: 0 auto;
        position: relative;
      }
      #head .headMain > .logo {
        float: left;
        margin-top: 30px;
      }
      #head .headMain > .nav {
        float: right;
        margin-top: 50px;
      }
      #head .headMain > .nav > .list > li {
        float: left;
        margin-left: 40px;
        position: relative;
      }
      #head .headMain > .nav > .list > li .up {
        color: #000000;
        position: absolute;
        width: 0;
        overflow: hidden;
        transition: 1s width;
      }
      #head .headMain > .nav > .list > li:hover .up {
        width: 100%;
      }

      /*头部样式 结束*/

      /*内容区样式 开始*/
      #content {
        background: gray;
        position: relative;
        overflow: hidden;
        width: 100%;
      }
      #content > .list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transition: 1s top;
      }
      #content > .list > li {
        position: relative;
        background-position: 50% 50% !important;
        overflow: hidden;
      }
      #content > .list > li > section {
        width: 1100px;
        height: 520px;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
      /*第三屏 start*/
      #content > .list > .works .works1 {
        margin: 50px 0px 100px 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 {
        margin-left: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 > .item {
        float: left;
        width: 220px;
        height: 133px;
        margin: 0 1px;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .works .works2 > .item:last-of-type {
        width: 332px;
      }

      #content > .list > .works .works2 > .item .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        padding: 10px;
        background: #000000;
        opacity: 0;
        color: white;
        transition: 1s opacity;
      }
      #content > .list > .works .works2 > .item .mask .icon {
        width: 32px;
        height: 34px;
        margin: 0 auto;
        margin-top: 10px;
        transition: 1s background-position;
      }
      #content > .list > .works .works2 > .item img {
        transition: 1s transform;
      }

      #content > .list > .works .works2 > .item .mask .icon:hover {
        background-position: 0 -35px;
      }
      #content > .list > .works .works2 > .item:hover .mask {
        opacity: 0.8;
      }
      #content > .list > .works .works2 > .item:hover img {
        transform: rotate(30deg) scale(1.5);
      }

      @keyframes works3Move {
        0% {
          transform: translateX(0px) rotateY(0deg);
        }
        49% {
          transform: translateX(-490px) rotateY(0deg);
        }
        50% {
          transform: translateX(-500px) rotateY(180deg);
        }
        100% {
          transform: translateX(0px) rotateY(180deg);
        }
      }
      /*第三屏 end*/

      /*第二屏 start*/
      #content > .list > .course .course1 {
        margin: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course2 {
        margin-left: 50px;
        width: 400px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course3 {
        width: 480px;
        position: absolute;
        z-index: 2;
        right: 50px;
        top: 70px;
      }

      #content > .list > .course .course3 .line {
        position: absolute;
        top: -7px;
        width: 9px;
        height: 410px;
      }

      #content > .list > .course .course3 .line:nth-of-type(1) {
        left: -5px;
      }
      #content > .list > .course .course3 .line:nth-of-type(2) {
        left: 115px;
      }
      #content > .list > .course .course3 .line:nth-of-type(3) {
        left: 235px;
      }
      #content > .list > .course .course3 .line:nth-of-type(4) {
        left: 355px;
      }
      #content > .list > .course .course3 .line:nth-of-type(5) {
        left: 475px;
      }

      #content > .list > .course .course3 .item {
        float: left;
        width: 120px;
        height: 132px;
        position: relative;
        perspective: 500px;
        transform-style: preserve-3d;
      }
      #content > .list > .course .course3 .item .face,
      #content > .list > .course .course3 .item .backFace {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 15px;
        transition: 1s transform;
      }

      #content > .list > .course .course3 .item .backFace {
        background-position: 50% 50% !important;
      }

      #content > .list > .course .course3 .item:hover .face {
        transform: rotateY(360deg);
      }
      #content > .list > .course .course3 .item:hover .backFace {
        transform: rotateY(180deg);
      }
      /*第二屏 end*/

      /*第一屏 start*/
      #content > .list > .home .home1 {
        width: 100%;
        height: 100%;
        perspective: 1000px;
        transform-style: preserve-3d;
      }
      #content > .list > .home .home1 > li {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        visibility: hidden;
      }
      #content > .list > .home .home1 > li:nth-child(1) {
        background: #dc6c5f;
      }
      #content > .list > .home .home1 > li:nth-child(2) {
        background: #95dc84;
      }
      #content > .list > .home .home1 > li:nth-child(3) {
        background: #64b9d2;
      }
      #content > .list > .home .home1 > li:nth-child(4) {
        background: #000000;
      }
      #content > .list > .home .home1 > li > div {
        color: white;
        text-align: center;
        margin-top: 200px;
      }
      #content > .list > .home .home1 > li.active {
        visibility: visible;
      }

      #content > .list > .home .home2 {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
      }
      #content > .list > .home .home2 > li {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.5);
        display: inline-block;
        box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
        cursor: pointer;
      }
      #content > .list > .home .home2 > li.active {
        background: white;
        cursor: default;
      }

      /*从左往右 leftHide  rightShow*/
      #content > .list > .home .home1 > li.leftHide {
        visibility: hidden;
        animation: 1s leftHide 1 linear;
      }
      #content > .list > .home .home1 > li.rightShow {
        visibility: visible;
        animation: 1s rightShow 1 linear;
      }
      @keyframes leftHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }
      @keyframes rightShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
        }
      }
      /*从右往左 leftShow  rightHide*/
      #content > .list > .home .home1 > li.leftShow {
        visibility: visible;
        animation: 1s leftShow 1 linear;
      }
      #content > .list > .home .home1 > li.rightHide {
        visibility: hidden;
        animation: 1s rightHide 1 linear;
      }
      @keyframes leftShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
        }
      }
      @keyframes rightHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }

      /*第一屏 end*/
      /*第四屏 strat*/
      #content > .list > .about .about1 {
        margin: 50px 0 100px 50px;
      }
      #content > .list > .about .about2 {
        margin-left: 50px;
        width: 400px;
      }
      #content > .list > .about .about3 > .item {
        width: 260px;
        height: 200px;
        border: 5px solid rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        position: absolute;
        z-index: 2;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item:nth-child(1) {
        left: 750px;
        top: 50px;
      }
      #content > .list > .about .about3 > .item:nth-child(2) {
        left: 600px;
        top: 290px;
      }

      #content > .list > .about .about3 > .item > span,
      #content > .list > .about .about3 > .item > ul {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      #content > .list > .about .about3 > .item:hover span {
        transform: scale(1);
      }

      #content > .list > .about .about3 > .item > ul > li {
        float: left;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item > ul > li > img {
        position: absolute;
        transition: 1s top, 1s left;
      }

      /*第四屏 end*/
      /*第五屏 strat*/
      #content > .list > .team .team1 {
        width: 400px;
        margin: 50px;
        float: left;
      }
      #content > .list > .team .team2 {
        width: 400px;
        margin: 50px;
        float: right;
      }
      #content > .list > .team .team3 {
        width: 944px;
        height: 448px;
        position: absolute;
        left: 50%;
        margin-left: -472px;
        top: 250px;
      }
      #content > .list > .team .team3 ul {
        position: relative;
        height: 100%;
      }
      #content > .list > .team .team3 ul > li:nth-child(1) {
        background-position: 0, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(2) {
        background-position: -118px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(3) {
        background-position: -236px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(4) {
        background-position: -354px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(5) {
        background-position: -472px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(6) {
        background-position: -590px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(7) {
        background-position: -708px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(8) {
        background-position: -826px, 0;
      }
      #content > .list > .team canvas {
        position: absolute;
        top: 0px;
      }

      /*第五屏 end*/

      /*小圆点*/
      #content > .dot {
        position: fixed;
        right: 10px;
        top: 50%;
      }
      #content > .dot > li {
        width: 10px;
        height: 10px;
        border: 5px solid pink;
        margin-top: 10px;
        border-radius: 50%;
      }
      #content > .dot > li.active {
        background: white;
      }

      /*内容区样式 结束*/

      /*出入场*/
      #content > .list > .home .home1,
      #content > .list > .home .home2 {
        transition: 1s transform, 1s opacity;
      }
      #content > .list > .about .about3 > .item,
      #content > .list > .team .team1,
      #content > .list > .team .team2 {
        transition: 1s transform;
      }

      /*音频*/

      /*开机动画*/
      #mask {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 100;
      }
      #mask .up {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
      }
      #mask .down {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
        position: absolute;
        bottom: 0;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      #wrap {
        height: 100%;
      }
      html,
      body,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      li {
        margin: 0px;
        padding: 0px;
        font: 14px "微软雅黑";
      }
      a {
        text-decoration: none;
        display: block;
      }
      li {
        list-style: none;
      }
      img {
        display: block;
      }
      /*css reset 结束*/

      /*common css 开始*/
      .clearfix {
        *zoom: 1;
      }
      .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
      .commonTitle {
        color: #009ee0;
        font-size: 80px;
        line-height: 0.8;
        font-weight: bold;
        letter-spacing: -5px;
      }
      .commonText {
        color: white;
        line-height: 1.5;
        font-size: 15px;
      }
      /*common css 结束*/

      /*头部样式 开始*/
      #head {
        background: white !important;
        width: 100%;
      }
      #head .headMain {
        width: 1100px;
        height: 80px;
        margin: 0 auto;
        position: relative;
      }
      #head .headMain > .logo {
        float: left;
        margin-top: 30px;
      }
      #head .headMain > .nav {
        float: right;
        margin-top: 50px;
      }
      #head .headMain > .nav > .list > li {
        float: left;
        margin-left: 40px;
        position: relative;
      }
      #head .headMain > .nav > .list > li .up {
        color: #000000;
        position: absolute;
        width: 0;
        overflow: hidden;
        transition: 1s width;
      }
      #head .headMain > .nav > .list > li:hover .up {
        width: 100%;
      }

      /*头部样式 结束*/

      /*内容区样式 开始*/
      #content {
        background: gray;
        position: relative;
        overflow: hidden;
        width: 100%;
      }
      #content > .list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transition: 1s top;
      }
      #content > .list > li {
        position: relative;
        background-position: 50% 50% !important;
        overflow: hidden;
      }
      #content > .list > li > section {
        width: 1100px;
        height: 520px;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
      /*第三屏 start*/
      #content > .list > .works .works1 {
        margin: 50px 0px 100px 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 {
        margin-left: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 > .item {
        float: left;
        width: 220px;
        height: 133px;
        margin: 0 1px;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .works .works2 > .item:last-of-type {
        width: 332px;
      }

      #content > .list > .works .works2 > .item .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        padding: 10px;
        background: #000000;
        opacity: 0;
        color: white;
        transition: 1s opacity;
      }
      #content > .list > .works .works2 > .item .mask .icon {
        width: 32px;
        height: 34px;
        margin: 0 auto;
        margin-top: 10px;
        transition: 1s background-position;
      }
      #content > .list > .works .works2 > .item img {
        transition: 1s transform;
      }

      #content > .list > .works .works2 > .item .mask .icon:hover {
        background-position: 0 -35px;
      }
      #content > .list > .works .works2 > .item:hover .mask {
        opacity: 0.8;
      }
      #content > .list > .works .works2 > .item:hover img {
        transform: rotate(30deg) scale(1.5);
      }

      @keyframes works3Move {
        0% {
          transform: translateX(0px) rotateY(0deg);
        }
        49% {
          transform: translateX(-490px) rotateY(0deg);
        }
        50% {
          transform: translateX(-500px) rotateY(180deg);
        }
        100% {
          transform: translateX(0px) rotateY(180deg);
        }
      }
      /*第三屏 end*/

      /*第二屏 start*/
      #content > .list > .course .course1 {
        margin: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course2 {
        margin-left: 50px;
        width: 400px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course3 {
        width: 480px;
        position: absolute;
        z-index: 2;
        right: 50px;
        top: 70px;
      }

      #content > .list > .course .course3 .line {
        position: absolute;
        top: -7px;
        width: 9px;
        height: 410px;
      }

      #content > .list > .course .course3 .line:nth-of-type(1) {
        left: -5px;
      }
      #content > .list > .course .course3 .line:nth-of-type(2) {
        left: 115px;
      }
      #content > .list > .course .course3 .line:nth-of-type(3) {
        left: 235px;
      }
      #content > .list > .course .course3 .line:nth-of-type(4) {
        left: 355px;
      }
      #content > .list > .course .course3 .line:nth-of-type(5) {
        left: 475px;
      }

      #content > .list > .course .course3 .item {
        float: left;
        width: 120px;
        height: 132px;
        position: relative;
        perspective: 500px;
        transform-style: preserve-3d;
      }
      #content > .list > .course .course3 .item .face,
      #content > .list > .course .course3 .item .backFace {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 15px;
        transition: 1s transform;
      }

      #content > .list > .course .course3 .item .backFace {
        background-position: 50% 50% !important;
      }

      #content > .list > .course .course3 .item:hover .face {
        transform: rotateY(360deg);
      }
      #content > .list > .course .course3 .item:hover .backFace {
        transform: rotateY(180deg);
      }
      /*第二屏 end*/

      /*第一屏 start*/
      #content > .list > .home .home1 {
        width: 100%;
        height: 100%;
        perspective: 1000px;
        transform-style: preserve-3d;
      }
      #content > .list > .home .home1 > li {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        visibility: hidden;
      }
      #content > .list > .home .home1 > li:nth-child(1) {
        background: #dc6c5f;
      }
      #content > .list > .home .home1 > li:nth-child(2) {
        background: #95dc84;
      }
      #content > .list > .home .home1 > li:nth-child(3) {
        background: #64b9d2;
      }
      #content > .list > .home .home1 > li:nth-child(4) {
        background: #000000;
      }
      #content > .list > .home .home1 > li > div {
        color: white;
        text-align: center;
        margin-top: 200px;
      }
      #content > .list > .home .home1 > li.active {
        visibility: visible;
      }

      #content > .list > .home .home2 {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
      }
      #content > .list > .home .home2 > li {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.5);
        display: inline-block;
        box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
        cursor: pointer;
      }
      #content > .list > .home .home2 > li.active {
        background: white;
        cursor: default;
      }

      /*从左往右 leftHide  rightShow*/
      #content > .list > .home .home1 > li.leftHide {
        visibility: hidden;
        animation: 1s leftHide 1 linear;
      }
      #content > .list > .home .home1 > li.rightShow {
        visibility: visible;
        animation: 1s rightShow 1 linear;
      }
      @keyframes leftHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }
      @keyframes rightShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
        }
      }
      /*从右往左 leftShow  rightHide*/
      #content > .list > .home .home1 > li.leftShow {
        visibility: visible;
        animation: 1s leftShow 1 linear;
      }
      #content > .list > .home .home1 > li.rightHide {
        visibility: hidden;
        animation: 1s rightHide 1 linear;
      }
      @keyframes leftShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
        }
      }
      @keyframes rightHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }

      /*第一屏 end*/
      /*第四屏 strat*/
      #content > .list > .about .about1 {
        margin: 50px 0 100px 50px;
      }
      #content > .list > .about .about2 {
        margin-left: 50px;
        width: 400px;
      }
      #content > .list > .about .about3 > .item {
        width: 260px;
        height: 200px;
        border: 5px solid rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        position: absolute;
        z-index: 2;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item:nth-child(1) {
        left: 750px;
        top: 50px;
      }
      #content > .list > .about .about3 > .item:nth-child(2) {
        left: 600px;
        top: 290px;
      }

      #content > .list > .about .about3 > .item > span,
      #content > .list > .about .about3 > .item > ul {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      #content > .list > .about .about3 > .item:hover span {
        transform: scale(1);
      }

      #content > .list > .about .about3 > .item > ul > li {
        float: left;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item > ul > li > img {
        position: absolute;
        transition: 1s top, 1s left;
      }

      /*第四屏 end*/
      /*第五屏 strat*/
      #content > .list > .team .team1 {
        width: 400px;
        margin: 50px;
        float: left;
      }
      #content > .list > .team .team2 {
        width: 400px;
        margin: 50px;
        float: right;
      }
      #content > .list > .team .team3 {
        width: 944px;
        height: 448px;
        position: absolute;
        left: 50%;
        margin-left: -472px;
        top: 250px;
      }
      #content > .list > .team .team3 ul {
        position: relative;
        height: 100%;
      }
      #content > .list > .team .team3 ul > li:nth-child(1) {
        background-position: 0, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(2) {
        background-position: -118px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(3) {
        background-position: -236px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(4) {
        background-position: -354px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(5) {
        background-position: -472px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(6) {
        background-position: -590px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(7) {
        background-position: -708px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(8) {
        background-position: -826px, 0;
      }
      #content > .list > .team canvas {
        position: absolute;
        top: 0px;
      }

      /*第五屏 end*/

      /*小圆点*/
      #content > .dot {
        position: fixed;
        right: 10px;
        top: 50%;
      }
      #content > .dot > li {
        width: 10px;
        height: 10px;
        border: 5px solid pink;
        margin-top: 10px;
        border-radius: 50%;
      }
      #content > .dot > li.active {
        background: white;
      }

      /*内容区样式 结束*/

      /*出入场*/
      #content > .list > .home .home1,
      #content > .list > .home .home2 {
        transition: 1s transform, 1s opacity;
      }
      #content > .list > .about .about3 > .item,
      #content > .list > .team .team1,
      #content > .list > .team .team2 {
        transition: 1s transform;
      }

      /*音频*/

      /*开机动画*/
      #mask {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 100;
      }
      #mask .up {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
      }
      #mask .down {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
        position: absolute;
        bottom: 0;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      #wrap {
        height: 100%;
      }
      html,
      body,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      li {
        margin: 0px;
        padding: 0px;
        font: 14px "微软雅黑";
      }
      a {
        text-decoration: none;
        display: block;
      }
      li {
        list-style: none;
      }
      img {
        display: block;
      }
      /*css reset 结束*/

      /*common css 开始*/
      .clearfix {
        *zoom: 1;
      }
      .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
      .commonTitle {
        color: #009ee0;
        font-size: 80px;
        line-height: 0.8;
        font-weight: bold;
        letter-spacing: -5px;
      }
      .commonText {
        color: white;
        line-height: 1.5;
        font-size: 15px;
      }
      /*common css 结束*/

      /*头部样式 开始*/
      #head {
        background: white !important;
        width: 100%;
      }
      #head .headMain {
        width: 1100px;
        height: 80px;
        margin: 0 auto;
        position: relative;
      }
      #head .headMain > .logo {
        float: left;
        margin-top: 30px;
      }
      #head .headMain > .nav {
        float: right;
        margin-top: 50px;
      }
      #head .headMain > .nav > .list > li {
        float: left;
        margin-left: 40px;
        position: relative;
      }
      #head .headMain > .nav > .list > li .up {
        color: #000000;
        position: absolute;
        width: 0;
        overflow: hidden;
        transition: 1s width;
      }
      #head .headMain > .nav > .list > li:hover .up {
        width: 100%;
      }

      /*头部样式 结束*/

      /*内容区样式 开始*/
      #content {
        background: gray;
        position: relative;
        overflow: hidden;
        width: 100%;
      }
      #content > .list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transition: 1s top;
      }
      #content > .list > li {
        position: relative;
        background-position: 50% 50% !important;
        overflow: hidden;
      }
      #content > .list > li > section {
        width: 1100px;
        height: 520px;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
      /*第三屏 start*/
      #content > .list > .works .works1 {
        margin: 50px 0px 100px 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 {
        margin-left: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 > .item {
        float: left;
        width: 220px;
        height: 133px;
        margin: 0 1px;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .works .works2 > .item:last-of-type {
        width: 332px;
      }

      #content > .list > .works .works2 > .item .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        padding: 10px;
        background: #000000;
        opacity: 0;
        color: white;
        transition: 1s opacity;
      }
      #content > .list > .works .works2 > .item .mask .icon {
        width: 32px;
        height: 34px;
        margin: 0 auto;
        margin-top: 10px;
        transition: 1s background-position;
      }
      #content > .list > .works .works2 > .item img {
        transition: 1s transform;
      }

      #content > .list > .works .works2 > .item .mask .icon:hover {
        background-position: 0 -35px;
      }
      #content > .list > .works .works2 > .item:hover .mask {
        opacity: 0.8;
      }
      #content > .list > .works .works2 > .item:hover img {
        transform: rotate(30deg) scale(1.5);
      }

      @keyframes works3Move {
        0% {
          transform: translateX(0px) rotateY(0deg);
        }
        49% {
          transform: translateX(-490px) rotateY(0deg);
        }
        50% {
          transform: translateX(-500px) rotateY(180deg);
        }
        100% {
          transform: translateX(0px) rotateY(180deg);
        }
      }
      /*第三屏 end*/

      /*第二屏 start*/
      #content > .list > .course .course1 {
        margin: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course2 {
        margin-left: 50px;
        width: 400px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course3 {
        width: 480px;
        position: absolute;
        z-index: 2;
        right: 50px;
        top: 70px;
      }

      #content > .list > .course .course3 .line {
        position: absolute;
        top: -7px;
        width: 9px;
        height: 410px;
      }

      #content > .list > .course .course3 .line:nth-of-type(1) {
        left: -5px;
      }
      #content > .list > .course .course3 .line:nth-of-type(2) {
        left: 115px;
      }
      #content > .list > .course .course3 .line:nth-of-type(3) {
        left: 235px;
      }
      #content > .list > .course .course3 .line:nth-of-type(4) {
        left: 355px;
      }
      #content > .list > .course .course3 .line:nth-of-type(5) {
        left: 475px;
      }

      #content > .list > .course .course3 .item {
        float: left;
        width: 120px;
        height: 132px;
        position: relative;
        perspective: 500px;
        transform-style: preserve-3d;
      }
      #content > .list > .course .course3 .item .face,
      #content > .list > .course .course3 .item .backFace {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 15px;
        transition: 1s transform;
      }

      #content > .list > .course .course3 .item .backFace {
        background-position: 50% 50% !important;
      }

      #content > .list > .course .course3 .item:hover .face {
        transform: rotateY(360deg);
      }
      #content > .list > .course .course3 .item:hover .backFace {
        transform: rotateY(180deg);
      }
      /*第二屏 end*/

      /*第一屏 start*/
      #content > .list > .home .home1 {
        width: 100%;
        height: 100%;
        perspective: 1000px;
        transform-style: preserve-3d;
      }
      #content > .list > .home .home1 > li {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        visibility: hidden;
      }
      #content > .list > .home .home1 > li:nth-child(1) {
        background: #dc6c5f;
      }
      #content > .list > .home .home1 > li:nth-child(2) {
        background: #95dc84;
      }
      #content > .list > .home .home1 > li:nth-child(3) {
        background: #64b9d2;
      }
      #content > .list > .home .home1 > li:nth-child(4) {
        background: #000000;
      }
      #content > .list > .home .home1 > li > div {
        color: white;
        text-align: center;
        margin-top: 200px;
      }
      #content > .list > .home .home1 > li.active {
        visibility: visible;
      }

      #content > .list > .home .home2 {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
      }
      #content > .list > .home .home2 > li {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.5);
        display: inline-block;
        box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
        cursor: pointer;
      }
      #content > .list > .home .home2 > li.active {
        background: white;
        cursor: default;
      }

      /*从左往右 leftHide  rightShow*/
      #content > .list > .home .home1 > li.leftHide {
        visibility: hidden;
        animation: 1s leftHide 1 linear;
      }
      #content > .list > .home .home1 > li.rightShow {
        visibility: visible;
        animation: 1s rightShow 1 linear;
      }
      @keyframes leftHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }
      @keyframes rightShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
        }
      }
      /*从右往左 leftShow  rightHide*/
      #content > .list > .home .home1 > li.leftShow {
        visibility: visible;
        animation: 1s leftShow 1 linear;
      }
      #content > .list > .home .home1 > li.rightHide {
        visibility: hidden;
        animation: 1s rightHide 1 linear;
      }
      @keyframes leftShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
        }
      }
      @keyframes rightHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }

      /*第一屏 end*/
      /*第四屏 strat*/
      #content > .list > .about .about1 {
        margin: 50px 0 100px 50px;
      }
      #content > .list > .about .about2 {
        margin-left: 50px;
        width: 400px;
      }
      #content > .list > .about .about3 > .item {
        width: 260px;
        height: 200px;
        border: 5px solid rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        position: absolute;
        z-index: 2;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item:nth-child(1) {
        left: 750px;
        top: 50px;
      }
      #content > .list > .about .about3 > .item:nth-child(2) {
        left: 600px;
        top: 290px;
      }

      #content > .list > .about .about3 > .item > span,
      #content > .list > .about .about3 > .item > ul {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      #content > .list > .about .about3 > .item:hover span {
        transform: scale(1);
      }

      #content > .list > .about .about3 > .item > ul > li {
        float: left;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item > ul > li > img {
        position: absolute;
        transition: 1s top, 1s left;
      }

      /*第四屏 end*/
      /*第五屏 strat*/
      #content > .list > .team .team1 {
        width: 400px;
        margin: 50px;
        float: left;
      }
      #content > .list > .team .team2 {
        width: 400px;
        margin: 50px;
        float: right;
      }
      #content > .list > .team .team3 {
        width: 944px;
        height: 448px;
        position: absolute;
        left: 50%;
        margin-left: -472px;
        top: 250px;
      }
      #content > .list > .team .team3 ul {
        position: relative;
        height: 100%;
      }
      #content > .list > .team .team3 ul > li:nth-child(1) {
        background-position: 0, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(2) {
        background-position: -118px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(3) {
        background-position: -236px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(4) {
        background-position: -354px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(5) {
        background-position: -472px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(6) {
        background-position: -590px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(7) {
        background-position: -708px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(8) {
        background-position: -826px, 0;
      }
      #content > .list > .team canvas {
        position: absolute;
        top: 0px;
      }

      /*第五屏 end*/

      /*小圆点*/
      #content > .dot {
        position: fixed;
        right: 10px;
        top: 50%;
      }
      #content > .dot > li {
        width: 10px;
        height: 10px;
        border: 5px solid pink;
        margin-top: 10px;
        border-radius: 50%;
      }
      #content > .dot > li.active {
        background: white;
      }

      /*内容区样式 结束*/

      /*出入场*/
      #content > .list > .home .home1,
      #content > .list > .home .home2 {
        transition: 1s transform, 1s opacity;
      }
      #content > .list > .about .about3 > .item,
      #content > .list > .team .team1,
      #content > .list > .team .team2 {
        transition: 1s transform;
      }

      /*音频*/

      /*开机动画*/
      #mask {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 100;
      }
      #mask .up {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
      }
      #mask .down {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
        position: absolute;
        bottom: 0;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      #wrap {
        height: 100%;
      }
      html,
      body,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      li {
        margin: 0px;
        padding: 0px;
        font: 14px "微软雅黑";
      }
      a {
        text-decoration: none;
        display: block;
      }
      li {
        list-style: none;
      }
      img {
        display: block;
      }
      /*css reset 结束*/

      /*common css 开始*/
      .clearfix {
        *zoom: 1;
      }
      .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
      .commonTitle {
        color: #009ee0;
        font-size: 80px;
        line-height: 0.8;
        font-weight: bold;
        letter-spacing: -5px;
      }
      .commonText {
        color: white;
        line-height: 1.5;
        font-size: 15px;
      }
      /*common css 结束*/

      /*头部样式 开始*/
      #head {
        background: white !important;
        width: 100%;
      }
      #head .headMain {
        width: 1100px;
        height: 80px;
        margin: 0 auto;
        position: relative;
      }
      #head .headMain > .logo {
        float: left;
        margin-top: 30px;
      }
      #head .headMain > .nav {
        float: right;
        margin-top: 50px;
      }
      #head .headMain > .nav > .list > li {
        float: left;
        margin-left: 40px;
        position: relative;
      }
      #head .headMain > .nav > .list > li .up {
        color: #000000;
        position: absolute;
        width: 0;
        overflow: hidden;
        transition: 1s width;
      }
      #head .headMain > .nav > .list > li:hover .up {
        width: 100%;
      }

      /*头部样式 结束*/

      /*内容区样式 开始*/
      #content {
        background: gray;
        position: relative;
        overflow: hidden;
        width: 100%;
      }
      #content > .list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transition: 1s top;
      }
      #content > .list > li {
        position: relative;
        background-position: 50% 50% !important;
        overflow: hidden;
      }
      #content > .list > li > section {
        width: 1100px;
        height: 520px;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
      /*第三屏 start*/
      #content > .list > .works .works1 {
        margin: 50px 0px 100px 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 {
        margin-left: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 > .item {
        float: left;
        width: 220px;
        height: 133px;
        margin: 0 1px;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .works .works2 > .item:last-of-type {
        width: 332px;
      }

      #content > .list > .works .works2 > .item .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        padding: 10px;
        background: #000000;
        opacity: 0;
        color: white;
        transition: 1s opacity;
      }
      #content > .list > .works .works2 > .item .mask .icon {
        width: 32px;
        height: 34px;
        margin: 0 auto;
        margin-top: 10px;
        transition: 1s background-position;
      }
      #content > .list > .works .works2 > .item img {
        transition: 1s transform;
      }

      #content > .list > .works .works2 > .item .mask .icon:hover {
        background-position: 0 -35px;
      }
      #content > .list > .works .works2 > .item:hover .mask {
        opacity: 0.8;
      }
      #content > .list > .works .works2 > .item:hover img {
        transform: rotate(30deg) scale(1.5);
      }

      @keyframes works3Move {
        0% {
          transform: translateX(0px) rotateY(0deg);
        }
        49% {
          transform: translateX(-490px) rotateY(0deg);
        }
        50% {
          transform: translateX(-500px) rotateY(180deg);
        }
        100% {
          transform: translateX(0px) rotateY(180deg);
        }
      }
      /*第三屏 end*/

      /*第二屏 start*/
      #content > .list > .course .course1 {
        margin: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course2 {
        margin-left: 50px;
        width: 400px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course3 {
        width: 480px;
        position: absolute;
        z-index: 2;
        right: 50px;
        top: 70px;
      }

      #content > .list > .course .course3 .line {
        position: absolute;
        top: -7px;
        width: 9px;
        height: 410px;
      }

      #content > .list > .course .course3 .line:nth-of-type(1) {
        left: -5px;
      }
      #content > .list > .course .course3 .line:nth-of-type(2) {
        left: 115px;
      }
      #content > .list > .course .course3 .line:nth-of-type(3) {
        left: 235px;
      }
      #content > .list > .course .course3 .line:nth-of-type(4) {
        left: 355px;
      }
      #content > .list > .course .course3 .line:nth-of-type(5) {
        left: 475px;
      }

      #content > .list > .course .course3 .item {
        float: left;
        width: 120px;
        height: 132px;
        position: relative;
        perspective: 500px;
        transform-style: preserve-3d;
      }
      #content > .list > .course .course3 .item .face,
      #content > .list > .course .course3 .item .backFace {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 15px;
        transition: 1s transform;
      }

      #content > .list > .course .course3 .item .backFace {
        background-position: 50% 50% !important;
      }

      #content > .list > .course .course3 .item:hover .face {
        transform: rotateY(360deg);
      }
      #content > .list > .course .course3 .item:hover .backFace {
        transform: rotateY(180deg);
      }
      /*第二屏 end*/

      /*第一屏 start*/
      #content > .list > .home .home1 {
        width: 100%;
        height: 100%;
        perspective: 1000px;
        transform-style: preserve-3d;
      }
      #content > .list > .home .home1 > li {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        visibility: hidden;
      }
      #content > .list > .home .home1 > li:nth-child(1) {
        background: #dc6c5f;
      }
      #content > .list > .home .home1 > li:nth-child(2) {
        background: #95dc84;
      }
      #content > .list > .home .home1 > li:nth-child(3) {
        background: #64b9d2;
      }
      #content > .list > .home .home1 > li:nth-child(4) {
        background: #000000;
      }
      #content > .list > .home .home1 > li > div {
        color: white;
        text-align: center;
        margin-top: 200px;
      }
      #content > .list > .home .home1 > li.active {
        visibility: visible;
      }

      #content > .list > .home .home2 {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
      }
      #content > .list > .home .home2 > li {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.5);
        display: inline-block;
        box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
        cursor: pointer;
      }
      #content > .list > .home .home2 > li.active {
        background: white;
        cursor: default;
      }

      /*从左往右 leftHide  rightShow*/
      #content > .list > .home .home1 > li.leftHide {
        visibility: hidden;
        animation: 1s leftHide 1 linear;
      }
      #content > .list > .home .home1 > li.rightShow {
        visibility: visible;
        animation: 1s rightShow 1 linear;
      }
      @keyframes leftHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }
      @keyframes rightShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
        }
      }
      /*从右往左 leftShow  rightHide*/
      #content > .list > .home .home1 > li.leftShow {
        visibility: visible;
        animation: 1s leftShow 1 linear;
      }
      #content > .list > .home .home1 > li.rightHide {
        visibility: hidden;
        animation: 1s rightHide 1 linear;
      }
      @keyframes leftShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
        }
      }
      @keyframes rightHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }

      /*第一屏 end*/
      /*第四屏 strat*/
      #content > .list > .about .about1 {
        margin: 50px 0 100px 50px;
      }
      #content > .list > .about .about2 {
        margin-left: 50px;
        width: 400px;
      }
      #content > .list > .about .about3 > .item {
        width: 260px;
        height: 200px;
        border: 5px solid rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        position: absolute;
        z-index: 2;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item:nth-child(1) {
        left: 750px;
        top: 50px;
      }
      #content > .list > .about .about3 > .item:nth-child(2) {
        left: 600px;
        top: 290px;
      }

      #content > .list > .about .about3 > .item > span,
      #content > .list > .about .about3 > .item > ul {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      #content > .list > .about .about3 > .item:hover span {
        transform: scale(1);
      }

      #content > .list > .about .about3 > .item > ul > li {
        float: left;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item > ul > li > img {
        position: absolute;
        transition: 1s top, 1s left;
      }

      /*第四屏 end*/
      /*第五屏 strat*/
      #content > .list > .team .team1 {
        width: 400px;
        margin: 50px;
        float: left;
      }
      #content > .list > .team .team2 {
        width: 400px;
        margin: 50px;
        float: right;
      }
      #content > .list > .team .team3 {
        width: 944px;
        height: 448px;
        position: absolute;
        left: 50%;
        margin-left: -472px;
        top: 250px;
      }
      #content > .list > .team .team3 ul {
        position: relative;
        height: 100%;
      }
      #content > .list > .team .team3 ul > li:nth-child(1) {
        background-position: 0, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(2) {
        background-position: -118px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(3) {
        background-position: -236px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(4) {
        background-position: -354px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(5) {
        background-position: -472px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(6) {
        background-position: -590px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(7) {
        background-position: -708px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(8) {
        background-position: -826px, 0;
      }
      #content > .list > .team canvas {
        position: absolute;
        top: 0px;
      }

      /*第五屏 end*/

      /*小圆点*/
      #content > .dot {
        position: fixed;
        right: 10px;
        top: 50%;
      }
      #content > .dot > li {
        width: 10px;
        height: 10px;
        border: 5px solid pink;
        margin-top: 10px;
        border-radius: 50%;
      }
      #content > .dot > li.active {
        background: white;
      }

      /*内容区样式 结束*/

      /*出入场*/
      #content > .list > .home .home1,
      #content > .list > .home .home2 {
        transition: 1s transform, 1s opacity;
      }
      #content > .list > .about .about3 > .item,
      #content > .list > .team .team1,
      #content > .list > .team .team2 {
        transition: 1s transform;
      }

      /*音频*/

      /*开机动画*/
      #mask {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 100;
      }
      #mask .up {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
      }
      #mask .down {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
        position: absolute;
        bottom: 0;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      #wrap {
        height: 100%;
      }
      html,
      body,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      li {
        margin: 0px;
        padding: 0px;
        font: 14px "微软雅黑";
      }
      a {
        text-decoration: none;
        display: block;
      }
      li {
        list-style: none;
      }
      img {
        display: block;
      }
      /*css reset 结束*/

      /*common css 开始*/
      .clearfix {
        *zoom: 1;
      }
      .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
      .commonTitle {
        color: #009ee0;
        font-size: 80px;
        line-height: 0.8;
        font-weight: bold;
        letter-spacing: -5px;
      }
      .commonText {
        color: white;
        line-height: 1.5;
        font-size: 15px;
      }
      /*common css 结束*/

      /*头部样式 开始*/
      #head {
        background: white !important;
        width: 100%;
      }
      #head .headMain {
        width: 1100px;
        height: 80px;
        margin: 0 auto;
        position: relative;
      }
      #head .headMain > .logo {
        float: left;
        margin-top: 30px;
      }
      #head .headMain > .nav {
        float: right;
        margin-top: 50px;
      }
      #head .headMain > .nav > .list > li {
        float: left;
        margin-left: 40px;
        position: relative;
      }
      #head .headMain > .nav > .list > li .up {
        color: #000000;
        position: absolute;
        width: 0;
        overflow: hidden;
        transition: 1s width;
      }
      #head .headMain > .nav > .list > li:hover .up {
        width: 100%;
      }

      /*头部样式 结束*/

      /*内容区样式 开始*/
      #content {
        background: gray;
        position: relative;
        overflow: hidden;
        width: 100%;
      }
      #content > .list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transition: 1s top;
      }
      #content > .list > li {
        position: relative;
        background-position: 50% 50% !important;
        overflow: hidden;
      }
      #content > .list > li > section {
        width: 1100px;
        height: 520px;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
      /*第三屏 start*/
      #content > .list > .works .works1 {
        margin: 50px 0px 100px 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 {
        margin-left: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 > .item {
        float: left;
        width: 220px;
        height: 133px;
        margin: 0 1px;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .works .works2 > .item:last-of-type {
        width: 332px;
      }

      #content > .list > .works .works2 > .item .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        padding: 10px;
        background: #000000;
        opacity: 0;
        color: white;
        transition: 1s opacity;
      }
      #content > .list > .works .works2 > .item .mask .icon {
        width: 32px;
        height: 34px;
        margin: 0 auto;
        margin-top: 10px;
        transition: 1s background-position;
      }
      #content > .list > .works .works2 > .item img {
        transition: 1s transform;
      }

      #content > .list > .works .works2 > .item .mask .icon:hover {
        background-position: 0 -35px;
      }
      #content > .list > .works .works2 > .item:hover .mask {
        opacity: 0.8;
      }
      #content > .list > .works .works2 > .item:hover img {
        transform: rotate(30deg) scale(1.5);
      }

      @keyframes works3Move {
        0% {
          transform: translateX(0px) rotateY(0deg);
        }
        49% {
          transform: translateX(-490px) rotateY(0deg);
        }
        50% {
          transform: translateX(-500px) rotateY(180deg);
        }
        100% {
          transform: translateX(0px) rotateY(180deg);
        }
      }
      /*第三屏 end*/

      /*第二屏 start*/
      #content > .list > .course .course1 {
        margin: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course2 {
        margin-left: 50px;
        width: 400px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course3 {
        width: 480px;
        position: absolute;
        z-index: 2;
        right: 50px;
        top: 70px;
      }

      #content > .list > .course .course3 .line {
        position: absolute;
        top: -7px;
        width: 9px;
        height: 410px;
      }

      #content > .list > .course .course3 .line:nth-of-type(1) {
        left: -5px;
      }
      #content > .list > .course .course3 .line:nth-of-type(2) {
        left: 115px;
      }
      #content > .list > .course .course3 .line:nth-of-type(3) {
        left: 235px;
      }
      #content > .list > .course .course3 .line:nth-of-type(4) {
        left: 355px;
      }
      #content > .list > .course .course3 .line:nth-of-type(5) {
        left: 475px;
      }

      #content > .list > .course .course3 .item {
        float: left;
        width: 120px;
        height: 132px;
        position: relative;
        perspective: 500px;
        transform-style: preserve-3d;
      }
      #content > .list > .course .course3 .item .face,
      #content > .list > .course .course3 .item .backFace {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 15px;
        transition: 1s transform;
      }

      #content > .list > .course .course3 .item .backFace {
        background-position: 50% 50% !important;
      }

      #content > .list > .course .course3 .item:hover .face {
        transform: rotateY(360deg);
      }
      #content > .list > .course .course3 .item:hover .backFace {
        transform: rotateY(180deg);
      }
      /*第二屏 end*/

      /*第一屏 start*/
      #content > .list > .home .home1 {
        width: 100%;
        height: 100%;
        perspective: 1000px;
        transform-style: preserve-3d;
      }
      #content > .list > .home .home1 > li {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        visibility: hidden;
      }
      #content > .list > .home .home1 > li:nth-child(1) {
        background: #dc6c5f;
      }
      #content > .list > .home .home1 > li:nth-child(2) {
        background: #95dc84;
      }
      #content > .list > .home .home1 > li:nth-child(3) {
        background: #64b9d2;
      }
      #content > .list > .home .home1 > li:nth-child(4) {
        background: #000000;
      }
      #content > .list > .home .home1 > li > div {
        color: white;
        text-align: center;
        margin-top: 200px;
      }
      #content > .list > .home .home1 > li.active {
        visibility: visible;
      }

      #content > .list > .home .home2 {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
      }
      #content > .list > .home .home2 > li {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.5);
        display: inline-block;
        box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
        cursor: pointer;
      }
      #content > .list > .home .home2 > li.active {
        background: white;
        cursor: default;
      }

      /*从左往右 leftHide  rightShow*/
      #content > .list > .home .home1 > li.leftHide {
        visibility: hidden;
        animation: 1s leftHide 1 linear;
      }
      #content > .list > .home .home1 > li.rightShow {
        visibility: visible;
        animation: 1s rightShow 1 linear;
      }
      @keyframes leftHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }
      @keyframes rightShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
        }
      }
      /*从右往左 leftShow  rightHide*/
      #content > .list > .home .home1 > li.leftShow {
        visibility: visible;
        animation: 1s leftShow 1 linear;
      }
      #content > .list > .home .home1 > li.rightHide {
        visibility: hidden;
        animation: 1s rightHide 1 linear;
      }
      @keyframes leftShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
        }
      }
      @keyframes rightHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }

      /*第一屏 end*/
      /*第四屏 strat*/
      #content > .list > .about .about1 {
        margin: 50px 0 100px 50px;
      }
      #content > .list > .about .about2 {
        margin-left: 50px;
        width: 400px;
      }
      #content > .list > .about .about3 > .item {
        width: 260px;
        height: 200px;
        border: 5px solid rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        position: absolute;
        z-index: 2;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item:nth-child(1) {
        left: 750px;
        top: 50px;
      }
      #content > .list > .about .about3 > .item:nth-child(2) {
        left: 600px;
        top: 290px;
      }

      #content > .list > .about .about3 > .item > span,
      #content > .list > .about .about3 > .item > ul {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      #content > .list > .about .about3 > .item:hover span {
        transform: scale(1);
      }

      #content > .list > .about .about3 > .item > ul > li {
        float: left;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item > ul > li > img {
        position: absolute;
        transition: 1s top, 1s left;
      }

      /*第四屏 end*/
      /*第五屏 strat*/
      #content > .list > .team .team1 {
        width: 400px;
        margin: 50px;
        float: left;
      }
      #content > .list > .team .team2 {
        width: 400px;
        margin: 50px;
        float: right;
      }
      #content > .list > .team .team3 {
        width: 944px;
        height: 448px;
        position: absolute;
        left: 50%;
        margin-left: -472px;
        top: 250px;
      }
      #content > .list > .team .team3 ul {
        position: relative;
        height: 100%;
      }
      #content > .list > .team .team3 ul > li:nth-child(1) {
        background-position: 0, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(2) {
        background-position: -118px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(3) {
        background-position: -236px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(4) {
        background-position: -354px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(5) {
        background-position: -472px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(6) {
        background-position: -590px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(7) {
        background-position: -708px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(8) {
        background-position: -826px, 0;
      }
      #content > .list > .team canvas {
        position: absolute;
        top: 0px;
      }

      /*第五屏 end*/

      /*小圆点*/
      #content > .dot {
        position: fixed;
        right: 10px;
        top: 50%;
      }
      #content > .dot > li {
        width: 10px;
        height: 10px;
        border: 5px solid pink;
        margin-top: 10px;
        border-radius: 50%;
      }
      #content > .dot > li.active {
        background: white;
      }

      /*内容区样式 结束*/

      /*出入场*/
      #content > .list > .home .home1,
      #content > .list > .home .home2 {
        transition: 1s transform, 1s opacity;
      }
      #content > .list > .about .about3 > .item,
      #content > .list > .team .team1,
      #content > .list > .team .team2 {
        transition: 1s transform;
      }

      /*音频*/

      /*开机动画*/
      #mask {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 100;
      }
      #mask .up {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
      }
      #mask .down {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
        position: absolute;
        bottom: 0;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      #wrap {
        height: 100%;
      }
      html,
      body,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      li {
        margin: 0px;
        padding: 0px;
        font: 14px "微软雅黑";
      }
      a {
        text-decoration: none;
        display: block;
      }
      li {
        list-style: none;
      }
      img {
        display: block;
      }
      /*css reset 结束*/

      /*common css 开始*/
      .clearfix {
        *zoom: 1;
      }
      .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
      .commonTitle {
        color: #009ee0;
        font-size: 80px;
        line-height: 0.8;
        font-weight: bold;
        letter-spacing: -5px;
      }
      .commonText {
        color: white;
        line-height: 1.5;
        font-size: 15px;
      }
      /*common css 结束*/

      /*头部样式 开始*/
      #head {
        background: white !important;
        width: 100%;
      }
      #head .headMain {
        width: 1100px;
        height: 80px;
        margin: 0 auto;
        position: relative;
      }
      #head .headMain > .logo {
        float: left;
        margin-top: 30px;
      }
      #head .headMain > .nav {
        float: right;
        margin-top: 50px;
      }
      #head .headMain > .nav > .list > li {
        float: left;
        margin-left: 40px;
        position: relative;
      }
      #head .headMain > .nav > .list > li .up {
        color: #000000;
        position: absolute;
        width: 0;
        overflow: hidden;
        transition: 1s width;
      }
      #head .headMain > .nav > .list > li:hover .up {
        width: 100%;
      }

      /*头部样式 结束*/

      /*内容区样式 开始*/
      #content {
        background: gray;
        position: relative;
        overflow: hidden;
        width: 100%;
      }
      #content > .list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transition: 1s top;
      }
      #content > .list > li {
        position: relative;
        background-position: 50% 50% !important;
        overflow: hidden;
      }
      #content > .list > li > section {
        width: 1100px;
        height: 520px;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
      /*第三屏 start*/
      #content > .list > .works .works1 {
        margin: 50px 0px 100px 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 {
        margin-left: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 > .item {
        float: left;
        width: 220px;
        height: 133px;
        margin: 0 1px;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .works .works2 > .item:last-of-type {
        width: 332px;
      }

      #content > .list > .works .works2 > .item .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        padding: 10px;
        background: #000000;
        opacity: 0;
        color: white;
        transition: 1s opacity;
      }
      #content > .list > .works .works2 > .item .mask .icon {
        width: 32px;
        height: 34px;
        margin: 0 auto;
        margin-top: 10px;
        transition: 1s background-position;
      }
      #content > .list > .works .works2 > .item img {
        transition: 1s transform;
      }

      #content > .list > .works .works2 > .item .mask .icon:hover {
        background-position: 0 -35px;
      }
      #content > .list > .works .works2 > .item:hover .mask {
        opacity: 0.8;
      }
      #content > .list > .works .works2 > .item:hover img {
        transform: rotate(30deg) scale(1.5);
      }

      @keyframes works3Move {
        0% {
          transform: translateX(0px) rotateY(0deg);
        }
        49% {
          transform: translateX(-490px) rotateY(0deg);
        }
        50% {
          transform: translateX(-500px) rotateY(180deg);
        }
        100% {
          transform: translateX(0px) rotateY(180deg);
        }
      }
      /*第三屏 end*/

      /*第二屏 start*/
      #content > .list > .course .course1 {
        margin: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course2 {
        margin-left: 50px;
        width: 400px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course3 {
        width: 480px;
        position: absolute;
        z-index: 2;
        right: 50px;
        top: 70px;
      }

      #content > .list > .course .course3 .line {
        position: absolute;
        top: -7px;
        width: 9px;
        height: 410px;
      }

      #content > .list > .course .course3 .line:nth-of-type(1) {
        left: -5px;
      }
      #content > .list > .course .course3 .line:nth-of-type(2) {
        left: 115px;
      }
      #content > .list > .course .course3 .line:nth-of-type(3) {
        left: 235px;
      }
      #content > .list > .course .course3 .line:nth-of-type(4) {
        left: 355px;
      }
      #content > .list > .course .course3 .line:nth-of-type(5) {
        left: 475px;
      }

      #content > .list > .course .course3 .item {
        float: left;
        width: 120px;
        height: 132px;
        position: relative;
        perspective: 500px;
        transform-style: preserve-3d;
      }
      #content > .list > .course .course3 .item .face,
      #content > .list > .course .course3 .item .backFace {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 15px;
        transition: 1s transform;
      }

      #content > .list > .course .course3 .item .backFace {
        background-position: 50% 50% !important;
      }

      #content > .list > .course .course3 .item:hover .face {
        transform: rotateY(360deg);
      }
      #content > .list > .course .course3 .item:hover .backFace {
        transform: rotateY(180deg);
      }
      /*第二屏 end*/

      /*第一屏 start*/
      #content > .list > .home .home1 {
        width: 100%;
        height: 100%;
        perspective: 1000px;
        transform-style: preserve-3d;
      }
      #content > .list > .home .home1 > li {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        visibility: hidden;
      }
      #content > .list > .home .home1 > li:nth-child(1) {
        background: #dc6c5f;
      }
      #content > .list > .home .home1 > li:nth-child(2) {
        background: #95dc84;
      }
      #content > .list > .home .home1 > li:nth-child(3) {
        background: #64b9d2;
      }
      #content > .list > .home .home1 > li:nth-child(4) {
        background: #000000;
      }
      #content > .list > .home .home1 > li > div {
        color: white;
        text-align: center;
        margin-top: 200px;
      }
      #content > .list > .home .home1 > li.active {
        visibility: visible;
      }

      #content > .list > .home .home2 {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
      }
      #content > .list > .home .home2 > li {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.5);
        display: inline-block;
        box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
        cursor: pointer;
      }
      #content > .list > .home .home2 > li.active {
        background: white;
        cursor: default;
      }

      /*从左往右 leftHide  rightShow*/
      #content > .list > .home .home1 > li.leftHide {
        visibility: hidden;
        animation: 1s leftHide 1 linear;
      }
      #content > .list > .home .home1 > li.rightShow {
        visibility: visible;
        animation: 1s rightShow 1 linear;
      }
      @keyframes leftHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }
      @keyframes rightShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
        }
      }
      /*从右往左 leftShow  rightHide*/
      #content > .list > .home .home1 > li.leftShow {
        visibility: visible;
        animation: 1s leftShow 1 linear;
      }
      #content > .list > .home .home1 > li.rightHide {
        visibility: hidden;
        animation: 1s rightHide 1 linear;
      }
      @keyframes leftShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
        }
      }
      @keyframes rightHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }

      /*第一屏 end*/
      /*第四屏 strat*/
      #content > .list > .about .about1 {
        margin: 50px 0 100px 50px;
      }
      #content > .list > .about .about2 {
        margin-left: 50px;
        width: 400px;
      }
      #content > .list > .about .about3 > .item {
        width: 260px;
        height: 200px;
        border: 5px solid rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        position: absolute;
        z-index: 2;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item:nth-child(1) {
        left: 750px;
        top: 50px;
      }
      #content > .list > .about .about3 > .item:nth-child(2) {
        left: 600px;
        top: 290px;
      }

      #content > .list > .about .about3 > .item > span,
      #content > .list > .about .about3 > .item > ul {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      #content > .list > .about .about3 > .item:hover span {
        transform: scale(1);
      }

      #content > .list > .about .about3 > .item > ul > li {
        float: left;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item > ul > li > img {
        position: absolute;
        transition: 1s top, 1s left;
      }

      /*第四屏 end*/
      /*第五屏 strat*/
      #content > .list > .team .team1 {
        width: 400px;
        margin: 50px;
        float: left;
      }
      #content > .list > .team .team2 {
        width: 400px;
        margin: 50px;
        float: right;
      }
      #content > .list > .team .team3 {
        width: 944px;
        height: 448px;
        position: absolute;
        left: 50%;
        margin-left: -472px;
        top: 250px;
      }
      #content > .list > .team .team3 ul {
        position: relative;
        height: 100%;
      }
      #content > .list > .team .team3 ul > li:nth-child(1) {
        background-position: 0, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(2) {
        background-position: -118px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(3) {
        background-position: -236px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(4) {
        background-position: -354px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(5) {
        background-position: -472px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(6) {
        background-position: -590px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(7) {
        background-position: -708px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(8) {
        background-position: -826px, 0;
      }
      #content > .list > .team canvas {
        position: absolute;
        top: 0px;
      }

      /*第五屏 end*/

      /*小圆点*/
      #content > .dot {
        position: fixed;
        right: 10px;
        top: 50%;
      }
      #content > .dot > li {
        width: 10px;
        height: 10px;
        border: 5px solid pink;
        margin-top: 10px;
        border-radius: 50%;
      }
      #content > .dot > li.active {
        background: white;
      }

      /*内容区样式 结束*/

      /*出入场*/
      #content > .list > .home .home1,
      #content > .list > .home .home2 {
        transition: 1s transform, 1s opacity;
      }
      #content > .list > .about .about3 > .item,
      #content > .list > .team .team1,
      #content > .list > .team .team2 {
        transition: 1s transform;
      }

      /*音频*/

      /*开机动画*/
      #mask {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 100;
      }
      #mask .up {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
      }
      #mask .down {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
        position: absolute;
        bottom: 0;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      #wrap {
        height: 100%;
      }
      html,
      body,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      li {
        margin: 0px;
        padding: 0px;
        font: 14px "微软雅黑";
      }
      a {
        text-decoration: none;
        display: block;
      }
      li {
        list-style: none;
      }
      img {
        display: block;
      }
      /*css reset 结束*/

      /*common css 开始*/
      .clearfix {
        *zoom: 1;
      }
      .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
      .commonTitle {
        color: #009ee0;
        font-size: 80px;
        line-height: 0.8;
        font-weight: bold;
        letter-spacing: -5px;
      }
      .commonText {
        color: white;
        line-height: 1.5;
        font-size: 15px;
      }
      /*common css 结束*/

      /*头部样式 开始*/
      #head {
        background: white !important;
        width: 100%;
      }
      #head .headMain {
        width: 1100px;
        height: 80px;
        margin: 0 auto;
        position: relative;
      }
      #head .headMain > .logo {
        float: left;
        margin-top: 30px;
      }
      #head .headMain > .nav {
        float: right;
        margin-top: 50px;
      }
      #head .headMain > .nav > .list > li {
        float: left;
        margin-left: 40px;
        position: relative;
      }
      #head .headMain > .nav > .list > li .up {
        color: #000000;
        position: absolute;
        width: 0;
        overflow: hidden;
        transition: 1s width;
      }
      #head .headMain > .nav > .list > li:hover .up {
        width: 100%;
      }

      /*头部样式 结束*/

      /*内容区样式 开始*/
      #content {
        background: gray;
        position: relative;
        overflow: hidden;
        width: 100%;
      }
      #content > .list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transition: 1s top;
      }
      #content > .list > li {
        position: relative;
        background-position: 50% 50% !important;
        overflow: hidden;
      }
      #content > .list > li > section {
        width: 1100px;
        height: 520px;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
      /*第三屏 start*/
      #content > .list > .works .works1 {
        margin: 50px 0px 100px 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 {
        margin-left: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 > .item {
        float: left;
        width: 220px;
        height: 133px;
        margin: 0 1px;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .works .works2 > .item:last-of-type {
        width: 332px;
      }

      #content > .list > .works .works2 > .item .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        padding: 10px;
        background: #000000;
        opacity: 0;
        color: white;
        transition: 1s opacity;
      }
      #content > .list > .works .works2 > .item .mask .icon {
        width: 32px;
        height: 34px;
        margin: 0 auto;
        margin-top: 10px;
        transition: 1s background-position;
      }
      #content > .list > .works .works2 > .item img {
        transition: 1s transform;
      }

      #content > .list > .works .works2 > .item .mask .icon:hover {
        background-position: 0 -35px;
      }
      #content > .list > .works .works2 > .item:hover .mask {
        opacity: 0.8;
      }
      #content > .list > .works .works2 > .item:hover img {
        transform: rotate(30deg) scale(1.5);
      }

      @keyframes works3Move {
        0% {
          transform: translateX(0px) rotateY(0deg);
        }
        49% {
          transform: translateX(-490px) rotateY(0deg);
        }
        50% {
          transform: translateX(-500px) rotateY(180deg);
        }
        100% {
          transform: translateX(0px) rotateY(180deg);
        }
      }
      /*第三屏 end*/

      /*第二屏 start*/
      #content > .list > .course .course1 {
        margin: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course2 {
        margin-left: 50px;
        width: 400px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course3 {
        width: 480px;
        position: absolute;
        z-index: 2;
        right: 50px;
        top: 70px;
      }

      #content > .list > .course .course3 .line {
        position: absolute;
        top: -7px;
        width: 9px;
        height: 410px;
      }

      #content > .list > .course .course3 .line:nth-of-type(1) {
        left: -5px;
      }
      #content > .list > .course .course3 .line:nth-of-type(2) {
        left: 115px;
      }
      #content > .list > .course .course3 .line:nth-of-type(3) {
        left: 235px;
      }
      #content > .list > .course .course3 .line:nth-of-type(4) {
        left: 355px;
      }
      #content > .list > .course .course3 .line:nth-of-type(5) {
        left: 475px;
      }

      #content > .list > .course .course3 .item {
        float: left;
        width: 120px;
        height: 132px;
        position: relative;
        perspective: 500px;
        transform-style: preserve-3d;
      }
      #content > .list > .course .course3 .item .face,
      #content > .list > .course .course3 .item .backFace {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 15px;
        transition: 1s transform;
      }

      #content > .list > .course .course3 .item .backFace {
        background-position: 50% 50% !important;
      }

      #content > .list > .course .course3 .item:hover .face {
        transform: rotateY(360deg);
      }
      #content > .list > .course .course3 .item:hover .backFace {
        transform: rotateY(180deg);
      }
      /*第二屏 end*/

      /*第一屏 start*/
      #content > .list > .home .home1 {
        width: 100%;
        height: 100%;
        perspective: 1000px;
        transform-style: preserve-3d;
      }
      #content > .list > .home .home1 > li {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        visibility: hidden;
      }
      #content > .list > .home .home1 > li:nth-child(1) {
        background: #dc6c5f;
      }
      #content > .list > .home .home1 > li:nth-child(2) {
        background: #95dc84;
      }
      #content > .list > .home .home1 > li:nth-child(3) {
        background: #64b9d2;
      }
      #content > .list > .home .home1 > li:nth-child(4) {
        background: #000000;
      }
      #content > .list > .home .home1 > li > div {
        color: white;
        text-align: center;
        margin-top: 200px;
      }
      #content > .list > .home .home1 > li.active {
        visibility: visible;
      }

      #content > .list > .home .home2 {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
      }
      #content > .list > .home .home2 > li {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.5);
        display: inline-block;
        box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
        cursor: pointer;
      }
      #content > .list > .home .home2 > li.active {
        background: white;
        cursor: default;
      }

      /*从左往右 leftHide  rightShow*/
      #content > .list > .home .home1 > li.leftHide {
        visibility: hidden;
        animation: 1s leftHide 1 linear;
      }
      #content > .list > .home .home1 > li.rightShow {
        visibility: visible;
        animation: 1s rightShow 1 linear;
      }
      @keyframes leftHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }
      @keyframes rightShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
        }
      }
      /*从右往左 leftShow  rightHide*/
      #content > .list > .home .home1 > li.leftShow {
        visibility: visible;
        animation: 1s leftShow 1 linear;
      }
      #content > .list > .home .home1 > li.rightHide {
        visibility: hidden;
        animation: 1s rightHide 1 linear;
      }
      @keyframes leftShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
        }
      }
      @keyframes rightHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }

      /*第一屏 end*/
      /*第四屏 strat*/
      #content > .list > .about .about1 {
        margin: 50px 0 100px 50px;
      }
      #content > .list > .about .about2 {
        margin-left: 50px;
        width: 400px;
      }
      #content > .list > .about .about3 > .item {
        width: 260px;
        height: 200px;
        border: 5px solid rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        position: absolute;
        z-index: 2;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item:nth-child(1) {
        left: 750px;
        top: 50px;
      }
      #content > .list > .about .about3 > .item:nth-child(2) {
        left: 600px;
        top: 290px;
      }

      #content > .list > .about .about3 > .item > span,
      #content > .list > .about .about3 > .item > ul {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      #content > .list > .about .about3 > .item:hover span {
        transform: scale(1);
      }

      #content > .list > .about .about3 > .item > ul > li {
        float: left;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item > ul > li > img {
        position: absolute;
        transition: 1s top, 1s left;
      }

      /*第四屏 end*/
      /*第五屏 strat*/
      #content > .list > .team .team1 {
        width: 400px;
        margin: 50px;
        float: left;
      }
      #content > .list > .team .team2 {
        width: 400px;
        margin: 50px;
        float: right;
      }
      #content > .list > .team .team3 {
        width: 944px;
        height: 448px;
        position: absolute;
        left: 50%;
        margin-left: -472px;
        top: 250px;
      }
      #content > .list > .team .team3 ul {
        position: relative;
        height: 100%;
      }
      #content > .list > .team .team3 ul > li:nth-child(1) {
        background-position: 0, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(2) {
        background-position: -118px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(3) {
        background-position: -236px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(4) {
        background-position: -354px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(5) {
        background-position: -472px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(6) {
        background-position: -590px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(7) {
        background-position: -708px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(8) {
        background-position: -826px, 0;
      }
      #content > .list > .team canvas {
        position: absolute;
        top: 0px;
      }

      /*第五屏 end*/

      /*小圆点*/
      #content > .dot {
        position: fixed;
        right: 10px;
        top: 50%;
      }
      #content > .dot > li {
        width: 10px;
        height: 10px;
        border: 5px solid pink;
        margin-top: 10px;
        border-radius: 50%;
      }
      #content > .dot > li.active {
        background: white;
      }

      /*内容区样式 结束*/

      /*出入场*/
      #content > .list > .home .home1,
      #content > .list > .home .home2 {
        transition: 1s transform, 1s opacity;
      }
      #content > .list > .about .about3 > .item,
      #content > .list > .team .team1,
      #content > .list > .team .team2 {
        transition: 1s transform;
      }

      /*音频*/

      /*开机动画*/
      #mask {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 100;
      }
      #mask .up {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
      }
      #mask .down {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
        position: absolute;
        bottom: 0;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      #wrap {
        height: 100%;
      }
      html,
      body,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      li {
        margin: 0px;
        padding: 0px;
        font: 14px "微软雅黑";
      }
      a {
        text-decoration: none;
        display: block;
      }
      li {
        list-style: none;
      }
      img {
        display: block;
      }
      /*css reset 结束*/

      /*common css 开始*/
      .clearfix {
        *zoom: 1;
      }
      .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
      .commonTitle {
        color: #009ee0;
        font-size: 80px;
        line-height: 0.8;
        font-weight: bold;
        letter-spacing: -5px;
      }
      .commonText {
        color: white;
        line-height: 1.5;
        font-size: 15px;
      }
      /*common css 结束*/

      /*头部样式 开始*/
      #head {
        background: white !important;
        width: 100%;
      }
      #head .headMain {
        width: 1100px;
        height: 80px;
        margin: 0 auto;
        position: relative;
      }
      #head .headMain > .logo {
        float: left;
        margin-top: 30px;
      }
      #head .headMain > .nav {
        float: right;
        margin-top: 50px;
      }
      #head .headMain > .nav > .list > li {
        float: left;
        margin-left: 40px;
        position: relative;
      }
      #head .headMain > .nav > .list > li .up {
        color: #000000;
        position: absolute;
        width: 0;
        overflow: hidden;
        transition: 1s width;
      }
      #head .headMain > .nav > .list > li:hover .up {
        width: 100%;
      }

      /*头部样式 结束*/

      /*内容区样式 开始*/
      #content {
        background: gray;
        position: relative;
        overflow: hidden;
        width: 100%;
      }
      #content > .list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transition: 1s top;
      }
      #content > .list > li {
        position: relative;
        background-position: 50% 50% !important;
        overflow: hidden;
      }
      #content > .list > li > section {
        width: 1100px;
        height: 520px;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
      /*第三屏 start*/
      #content > .list > .works .works1 {
        margin: 50px 0px 100px 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 {
        margin-left: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 > .item {
        float: left;
        width: 220px;
        height: 133px;
        margin: 0 1px;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .works .works2 > .item:last-of-type {
        width: 332px;
      }

      #content > .list > .works .works2 > .item .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        padding: 10px;
        background: #000000;
        opacity: 0;
        color: white;
        transition: 1s opacity;
      }
      #content > .list > .works .works2 > .item .mask .icon {
        width: 32px;
        height: 34px;
        margin: 0 auto;
        margin-top: 10px;
        transition: 1s background-position;
      }
      #content > .list > .works .works2 > .item img {
        transition: 1s transform;
      }

      #content > .list > .works .works2 > .item .mask .icon:hover {
        background-position: 0 -35px;
      }
      #content > .list > .works .works2 > .item:hover .mask {
        opacity: 0.8;
      }
      #content > .list > .works .works2 > .item:hover img {
        transform: rotate(30deg) scale(1.5);
      }

      @keyframes works3Move {
        0% {
          transform: translateX(0px) rotateY(0deg);
        }
        49% {
          transform: translateX(-490px) rotateY(0deg);
        }
        50% {
          transform: translateX(-500px) rotateY(180deg);
        }
        100% {
          transform: translateX(0px) rotateY(180deg);
        }
      }
      /*第三屏 end*/

      /*第二屏 start*/
      #content > .list > .course .course1 {
        margin: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course2 {
        margin-left: 50px;
        width: 400px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course3 {
        width: 480px;
        position: absolute;
        z-index: 2;
        right: 50px;
        top: 70px;
      }

      #content > .list > .course .course3 .line {
        position: absolute;
        top: -7px;
        width: 9px;
        height: 410px;
      }

      #content > .list > .course .course3 .line:nth-of-type(1) {
        left: -5px;
      }
      #content > .list > .course .course3 .line:nth-of-type(2) {
        left: 115px;
      }
      #content > .list > .course .course3 .line:nth-of-type(3) {
        left: 235px;
      }
      #content > .list > .course .course3 .line:nth-of-type(4) {
        left: 355px;
      }
      #content > .list > .course .course3 .line:nth-of-type(5) {
        left: 475px;
      }

      #content > .list > .course .course3 .item {
        float: left;
        width: 120px;
        height: 132px;
        position: relative;
        perspective: 500px;
        transform-style: preserve-3d;
      }
      #content > .list > .course .course3 .item .face,
      #content > .list > .course .course3 .item .backFace {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 15px;
        transition: 1s transform;
      }

      #content > .list > .course .course3 .item .backFace {
        background-position: 50% 50% !important;
      }

      #content > .list > .course .course3 .item:hover .face {
        transform: rotateY(360deg);
      }
      #content > .list > .course .course3 .item:hover .backFace {
        transform: rotateY(180deg);
      }
      /*第二屏 end*/

      /*第一屏 start*/
      #content > .list > .home .home1 {
        width: 100%;
        height: 100%;
        perspective: 1000px;
        transform-style: preserve-3d;
      }
      #content > .list > .home .home1 > li {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        visibility: hidden;
      }
      #content > .list > .home .home1 > li:nth-child(1) {
        background: #dc6c5f;
      }
      #content > .list > .home .home1 > li:nth-child(2) {
        background: #95dc84;
      }
      #content > .list > .home .home1 > li:nth-child(3) {
        background: #64b9d2;
      }
      #content > .list > .home .home1 > li:nth-child(4) {
        background: #000000;
      }
      #content > .list > .home .home1 > li > div {
        color: white;
        text-align: center;
        margin-top: 200px;
      }
      #content > .list > .home .home1 > li.active {
        visibility: visible;
      }

      #content > .list > .home .home2 {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
      }
      #content > .list > .home .home2 > li {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.5);
        display: inline-block;
        box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
        cursor: pointer;
      }
      #content > .list > .home .home2 > li.active {
        background: white;
        cursor: default;
      }

      /*从左往右 leftHide  rightShow*/
      #content > .list > .home .home1 > li.leftHide {
        visibility: hidden;
        animation: 1s leftHide 1 linear;
      }
      #content > .list > .home .home1 > li.rightShow {
        visibility: visible;
        animation: 1s rightShow 1 linear;
      }
      @keyframes leftHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }
      @keyframes rightShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
        }
      }
      /*从右往左 leftShow  rightHide*/
      #content > .list > .home .home1 > li.leftShow {
        visibility: visible;
        animation: 1s leftShow 1 linear;
      }
      #content > .list > .home .home1 > li.rightHide {
        visibility: hidden;
        animation: 1s rightHide 1 linear;
      }
      @keyframes leftShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
        }
      }
      @keyframes rightHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }

      /*第一屏 end*/
      /*第四屏 strat*/
      #content > .list > .about .about1 {
        margin: 50px 0 100px 50px;
      }
      #content > .list > .about .about2 {
        margin-left: 50px;
        width: 400px;
      }
      #content > .list > .about .about3 > .item {
        width: 260px;
        height: 200px;
        border: 5px solid rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        position: absolute;
        z-index: 2;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item:nth-child(1) {
        left: 750px;
        top: 50px;
      }
      #content > .list > .about .about3 > .item:nth-child(2) {
        left: 600px;
        top: 290px;
      }

      #content > .list > .about .about3 > .item > span,
      #content > .list > .about .about3 > .item > ul {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      #content > .list > .about .about3 > .item:hover span {
        transform: scale(1);
      }

      #content > .list > .about .about3 > .item > ul > li {
        float: left;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item > ul > li > img {
        position: absolute;
        transition: 1s top, 1s left;
      }

      /*第四屏 end*/
      /*第五屏 strat*/
      #content > .list > .team .team1 {
        width: 400px;
        margin: 50px;
        float: left;
      }
      #content > .list > .team .team2 {
        width: 400px;
        margin: 50px;
        float: right;
      }
      #content > .list > .team .team3 {
        width: 944px;
        height: 448px;
        position: absolute;
        left: 50%;
        margin-left: -472px;
        top: 250px;
      }
      #content > .list > .team .team3 ul {
        position: relative;
        height: 100%;
      }
      #content > .list > .team .team3 ul > li:nth-child(1) {
        background-position: 0, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(2) {
        background-position: -118px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(3) {
        background-position: -236px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(4) {
        background-position: -354px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(5) {
        background-position: -472px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(6) {
        background-position: -590px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(7) {
        background-position: -708px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(8) {
        background-position: -826px, 0;
      }
      #content > .list > .team canvas {
        position: absolute;
        top: 0px;
      }

      /*第五屏 end*/

      /*小圆点*/
      #content > .dot {
        position: fixed;
        right: 10px;
        top: 50%;
      }
      #content > .dot > li {
        width: 10px;
        height: 10px;
        border: 5px solid pink;
        margin-top: 10px;
        border-radius: 50%;
      }
      #content > .dot > li.active {
        background: white;
      }

      /*内容区样式 结束*/

      /*出入场*/
      #content > .list > .home .home1,
      #content > .list > .home .home2 {
        transition: 1s transform, 1s opacity;
      }
      #content > .list > .about .about3 > .item,
      #content > .list > .team .team1,
      #content > .list > .team .team2 {
        transition: 1s transform;
      }

      /*音频*/

      /*开机动画*/
      #mask {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 100;
      }
      #mask .up {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
      }
      #mask .down {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
        position: absolute;
        bottom: 0;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      #wrap {
        height: 100%;
      }
      html,
      body,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      li {
        margin: 0px;
        padding: 0px;
        font: 14px "微软雅黑";
      }
      a {
        text-decoration: none;
        display: block;
      }
      li {
        list-style: none;
      }
      img {
        display: block;
      }
      /*css reset 结束*/

      /*common css 开始*/
      .clearfix {
        *zoom: 1;
      }
      .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
      .commonTitle {
        color: #009ee0;
        font-size: 80px;
        line-height: 0.8;
        font-weight: bold;
        letter-spacing: -5px;
      }
      .commonText {
        color: white;
        line-height: 1.5;
        font-size: 15px;
      }
      /*common css 结束*/

      /*头部样式 开始*/
      #head {
        background: white !important;
        width: 100%;
      }
      #head .headMain {
        width: 1100px;
        height: 80px;
        margin: 0 auto;
        position: relative;
      }
      #head .headMain > .logo {
        float: left;
        margin-top: 30px;
      }
      #head .headMain > .nav {
        float: right;
        margin-top: 50px;
      }
      #head .headMain > .nav > .list > li {
        float: left;
        margin-left: 40px;
        position: relative;
      }
      #head .headMain > .nav > .list > li .up {
        color: #000000;
        position: absolute;
        width: 0;
        overflow: hidden;
        transition: 1s width;
      }
      #head .headMain > .nav > .list > li:hover .up {
        width: 100%;
      }

      /*头部样式 结束*/

      /*内容区样式 开始*/
      #content {
        background: gray;
        position: relative;
        overflow: hidden;
        width: 100%;
      }
      #content > .list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transition: 1s top;
      }
      #content > .list > li {
        position: relative;
        background-position: 50% 50% !important;
        overflow: hidden;
      }
      #content > .list > li > section {
        width: 1100px;
        height: 520px;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
      /*第三屏 start*/
      #content > .list > .works .works1 {
        margin: 50px 0px 100px 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 {
        margin-left: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 > .item {
        float: left;
        width: 220px;
        height: 133px;
        margin: 0 1px;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .works .works2 > .item:last-of-type {
        width: 332px;
      }

      #content > .list > .works .works2 > .item .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        padding: 10px;
        background: #000000;
        opacity: 0;
        color: white;
        transition: 1s opacity;
      }
      #content > .list > .works .works2 > .item .mask .icon {
        width: 32px;
        height: 34px;
        margin: 0 auto;
        margin-top: 10px;
        transition: 1s background-position;
      }
      #content > .list > .works .works2 > .item img {
        transition: 1s transform;
      }

      #content > .list > .works .works2 > .item .mask .icon:hover {
        background-position: 0 -35px;
      }
      #content > .list > .works .works2 > .item:hover .mask {
        opacity: 0.8;
      }
      #content > .list > .works .works2 > .item:hover img {
        transform: rotate(30deg) scale(1.5);
      }

      @keyframes works3Move {
        0% {
          transform: translateX(0px) rotateY(0deg);
        }
        49% {
          transform: translateX(-490px) rotateY(0deg);
        }
        50% {
          transform: translateX(-500px) rotateY(180deg);
        }
        100% {
          transform: translateX(0px) rotateY(180deg);
        }
      }
      /*第三屏 end*/

      /*第二屏 start*/
      #content > .list > .course .course1 {
        margin: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course2 {
        margin-left: 50px;
        width: 400px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course3 {
        width: 480px;
        position: absolute;
        z-index: 2;
        right: 50px;
        top: 70px;
      }

      #content > .list > .course .course3 .line {
        position: absolute;
        top: -7px;
        width: 9px;
        height: 410px;
      }

      #content > .list > .course .course3 .line:nth-of-type(1) {
        left: -5px;
      }
      #content > .list > .course .course3 .line:nth-of-type(2) {
        left: 115px;
      }
      #content > .list > .course .course3 .line:nth-of-type(3) {
        left: 235px;
      }
      #content > .list > .course .course3 .line:nth-of-type(4) {
        left: 355px;
      }
      #content > .list > .course .course3 .line:nth-of-type(5) {
        left: 475px;
      }

      #content > .list > .course .course3 .item {
        float: left;
        width: 120px;
        height: 132px;
        position: relative;
        perspective: 500px;
        transform-style: preserve-3d;
      }
      #content > .list > .course .course3 .item .face,
      #content > .list > .course .course3 .item .backFace {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 15px;
        transition: 1s transform;
      }

      #content > .list > .course .course3 .item .backFace {
        background-position: 50% 50% !important;
      }

      #content > .list > .course .course3 .item:hover .face {
        transform: rotateY(360deg);
      }
      #content > .list > .course .course3 .item:hover .backFace {
        transform: rotateY(180deg);
      }
      /*第二屏 end*/

      /*第一屏 start*/
      #content > .list > .home .home1 {
        width: 100%;
        height: 100%;
        perspective: 1000px;
        transform-style: preserve-3d;
      }
      #content > .list > .home .home1 > li {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        visibility: hidden;
      }
      #content > .list > .home .home1 > li:nth-child(1) {
        background: #dc6c5f;
      }
      #content > .list > .home .home1 > li:nth-child(2) {
        background: #95dc84;
      }
      #content > .list > .home .home1 > li:nth-child(3) {
        background: #64b9d2;
      }
      #content > .list > .home .home1 > li:nth-child(4) {
        background: #000000;
      }
      #content > .list > .home .home1 > li > div {
        color: white;
        text-align: center;
        margin-top: 200px;
      }
      #content > .list > .home .home1 > li.active {
        visibility: visible;
      }

      #content > .list > .home .home2 {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
      }
      #content > .list > .home .home2 > li {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.5);
        display: inline-block;
        box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
        cursor: pointer;
      }
      #content > .list > .home .home2 > li.active {
        background: white;
        cursor: default;
      }

      /*从左往右 leftHide  rightShow*/
      #content > .list > .home .home1 > li.leftHide {
        visibility: hidden;
        animation: 1s leftHide 1 linear;
      }
      #content > .list > .home .home1 > li.rightShow {
        visibility: visible;
        animation: 1s rightShow 1 linear;
      }
      @keyframes leftHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }
      @keyframes rightShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
        }
      }
      /*从右往左 leftShow  rightHide*/
      #content > .list > .home .home1 > li.leftShow {
        visibility: visible;
        animation: 1s leftShow 1 linear;
      }
      #content > .list > .home .home1 > li.rightHide {
        visibility: hidden;
        animation: 1s rightHide 1 linear;
      }
      @keyframes leftShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
        }
      }
      @keyframes rightHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }

      /*第一屏 end*/
      /*第四屏 strat*/
      #content > .list > .about .about1 {
        margin: 50px 0 100px 50px;
      }
      #content > .list > .about .about2 {
        margin-left: 50px;
        width: 400px;
      }
      #content > .list > .about .about3 > .item {
        width: 260px;
        height: 200px;
        border: 5px solid rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        position: absolute;
        z-index: 2;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item:nth-child(1) {
        left: 750px;
        top: 50px;
      }
      #content > .list > .about .about3 > .item:nth-child(2) {
        left: 600px;
        top: 290px;
      }

      #content > .list > .about .about3 > .item > span,
      #content > .list > .about .about3 > .item > ul {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      #content > .list > .about .about3 > .item:hover span {
        transform: scale(1);
      }

      #content > .list > .about .about3 > .item > ul > li {
        float: left;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item > ul > li > img {
        position: absolute;
        transition: 1s top, 1s left;
      }

      /*第四屏 end*/
      /*第五屏 strat*/
      #content > .list > .team .team1 {
        width: 400px;
        margin: 50px;
        float: left;
      }
      #content > .list > .team .team2 {
        width: 400px;
        margin: 50px;
        float: right;
      }
      #content > .list > .team .team3 {
        width: 944px;
        height: 448px;
        position: absolute;
        left: 50%;
        margin-left: -472px;
        top: 250px;
      }
      #content > .list > .team .team3 ul {
        position: relative;
        height: 100%;
      }
      #content > .list > .team .team3 ul > li:nth-child(1) {
        background-position: 0, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(2) {
        background-position: -118px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(3) {
        background-position: -236px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(4) {
        background-position: -354px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(5) {
        background-position: -472px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(6) {
        background-position: -590px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(7) {
        background-position: -708px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(8) {
        background-position: -826px, 0;
      }
      #content > .list > .team canvas {
        position: absolute;
        top: 0px;
      }

      /*第五屏 end*/

      /*小圆点*/
      #content > .dot {
        position: fixed;
        right: 10px;
        top: 50%;
      }
      #content > .dot > li {
        width: 10px;
        height: 10px;
        border: 5px solid pink;
        margin-top: 10px;
        border-radius: 50%;
      }
      #content > .dot > li.active {
        background: white;
      }

      /*内容区样式 结束*/

      /*出入场*/
      #content > .list > .home .home1,
      #content > .list > .home .home2 {
        transition: 1s transform, 1s opacity;
      }
      #content > .list > .about .about3 > .item,
      #content > .list > .team .team1,
      #content > .list > .team .team2 {
        transition: 1s transform;
      }

      /*音频*/

      /*开机动画*/
      #mask {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 100;
      }
      #mask .up {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
      }
      #mask .down {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
        position: absolute;
        bottom: 0;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      #wrap {
        height: 100%;
      }
      html,
      body,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      li {
        margin: 0px;
        padding: 0px;
        font: 14px "微软雅黑";
      }
      a {
        text-decoration: none;
        display: block;
      }
      li {
        list-style: none;
      }
      img {
        display: block;
      }
      /*css reset 结束*/

      /*common css 开始*/
      .clearfix {
        *zoom: 1;
      }
      .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
      .commonTitle {
        color: #009ee0;
        font-size: 80px;
        line-height: 0.8;
        font-weight: bold;
        letter-spacing: -5px;
      }
      .commonText {
        color: white;
        line-height: 1.5;
        font-size: 15px;
      }
      /*common css 结束*/

      /*头部样式 开始*/
      #head {
        background: white !important;
        width: 100%;
      }
      #head .headMain {
        width: 1100px;
        height: 80px;
        margin: 0 auto;
        position: relative;
      }
      #head .headMain > .logo {
        float: left;
        margin-top: 30px;
      }
      #head .headMain > .nav {
        float: right;
        margin-top: 50px;
      }
      #head .headMain > .nav > .list > li {
        float: left;
        margin-left: 40px;
        position: relative;
      }
      #head .headMain > .nav > .list > li .up {
        color: #000000;
        position: absolute;
        width: 0;
        overflow: hidden;
        transition: 1s width;
      }
      #head .headMain > .nav > .list > li:hover .up {
        width: 100%;
      }

      /*头部样式 结束*/

      /*内容区样式 开始*/
      #content {
        background: gray;
        position: relative;
        overflow: hidden;
        width: 100%;
      }
      #content > .list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transition: 1s top;
      }
      #content > .list > li {
        position: relative;
        background-position: 50% 50% !important;
        overflow: hidden;
      }
      #content > .list > li > section {
        width: 1100px;
        height: 520px;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
      /*第三屏 start*/
      #content > .list > .works .works1 {
        margin: 50px 0px 100px 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 {
        margin-left: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 > .item {
        float: left;
        width: 220px;
        height: 133px;
        margin: 0 1px;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .works .works2 > .item:last-of-type {
        width: 332px;
      }

      #content > .list > .works .works2 > .item .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        padding: 10px;
        background: #000000;
        opacity: 0;
        color: white;
        transition: 1s opacity;
      }
      #content > .list > .works .works2 > .item .mask .icon {
        width: 32px;
        height: 34px;
        margin: 0 auto;
        margin-top: 10px;
        transition: 1s background-position;
      }
      #content > .list > .works .works2 > .item img {
        transition: 1s transform;
      }

      #content > .list > .works .works2 > .item .mask .icon:hover {
        background-position: 0 -35px;
      }
      #content > .list > .works .works2 > .item:hover .mask {
        opacity: 0.8;
      }
      #content > .list > .works .works2 > .item:hover img {
        transform: rotate(30deg) scale(1.5);
      }

      @keyframes works3Move {
        0% {
          transform: translateX(0px) rotateY(0deg);
        }
        49% {
          transform: translateX(-490px) rotateY(0deg);
        }
        50% {
          transform: translateX(-500px) rotateY(180deg);
        }
        100% {
          transform: translateX(0px) rotateY(180deg);
        }
      }
      /*第三屏 end*/

      /*第二屏 start*/
      #content > .list > .course .course1 {
        margin: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course2 {
        margin-left: 50px;
        width: 400px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course3 {
        width: 480px;
        position: absolute;
        z-index: 2;
        right: 50px;
        top: 70px;
      }

      #content > .list > .course .course3 .line {
        position: absolute;
        top: -7px;
      }

      #content > .list > .course .course3 .line:nth-of-type(1) {
        left: -5px;
      }
      #content > .list > .course .course3 .line:nth-of-type(2) {
        left: 115px;
      }
      #content > .list > .course .course3 .line:nth-of-type(3) {
        left: 235px;
      }
      #content > .list > .course .course3 .line:nth-of-type(4) {
        left: 355px;
      }
      #content > .list > .course .course3 .line:nth-of-type(5) {
        left: 475px;
      }

      #content > .list > .course .course3 .item {
        float: left;
        width: 120px;
        height: 132px;
        position: relative;
        perspective: 500px;
        transform-style: preserve-3d;
      }
      #content > .list > .course .course3 .item .face,
      #content > .list > .course .course3 .item .backFace {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 15px;
        transition: 1s transform;
      }

      #content > .list > .course .course3 .item .backFace {
        background-position: 50% 50% !important;
      }

      #content > .list > .course .course3 .item:hover .face {
        transform: rotateY(360deg);
      }
      #content > .list > .course .course3 .item:hover .backFace {
        transform: rotateY(180deg);
      }
      /*第二屏 end*/

      /*第一屏 start*/
      #content > .list > .home .home1 {
        width: 100%;
        height: 100%;
        perspective: 1000px;
        transform-style: preserve-3d;
      }
      #content > .list > .home .home1 > li {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        visibility: hidden;
      }
      #content > .list > .home .home1 > li:nth-child(1) {
        background: #dc6c5f;
      }
      #content > .list > .home .home1 > li:nth-child(2) {
        background: #95dc84;
      }
      #content > .list > .home .home1 > li:nth-child(3) {
        background: #64b9d2;
      }
      #content > .list > .home .home1 > li:nth-child(4) {
        background: #000000;
      }
      #content > .list > .home .home1 > li > div {
        color: white;
        text-align: center;
        margin-top: 200px;
      }
      #content > .list > .home .home1 > li.active {
        visibility: visible;
      }

      #content > .list > .home .home2 {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
      }
      #content > .list > .home .home2 > li {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.5);
        display: inline-block;
        box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
        cursor: pointer;
      }
      #content > .list > .home .home2 > li.active {
        background: white;
        cursor: default;
      }

      /*从左往右 leftHide  rightShow*/
      #content > .list > .home .home1 > li.leftHide {
        visibility: hidden;
        animation: 1s leftHide 1 linear;
      }
      #content > .list > .home .home1 > li.rightShow {
        visibility: visible;
        animation: 1s rightShow 1 linear;
      }
      @keyframes leftHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }
      @keyframes rightShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
        }
      }
      /*从右往左 leftShow  rightHide*/
      #content > .list > .home .home1 > li.leftShow {
        visibility: visible;
        animation: 1s leftShow 1 linear;
      }
      #content > .list > .home .home1 > li.rightHide {
        visibility: hidden;
        animation: 1s rightHide 1 linear;
      }
      @keyframes leftShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
        }
      }
      @keyframes rightHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }

      /*第一屏 end*/
      /*第四屏 strat*/
      #content > .list > .about .about1 {
        margin: 50px 0 100px 50px;
      }
      #content > .list > .about .about2 {
        margin-left: 50px;
        width: 400px;
      }
      #content > .list > .about .about3 > .item {
        width: 260px;
        height: 200px;
        border: 5px solid rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        position: absolute;
        z-index: 2;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item:nth-child(1) {
        left: 750px;
        top: 50px;
      }
      #content > .list > .about .about3 > .item:nth-child(2) {
        left: 600px;
        top: 290px;
      }

      #content > .list > .about .about3 > .item > span,
      #content > .list > .about .about3 > .item > ul {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      #content > .list > .about .about3 > .item:hover span {
        transform: scale(1);
      }

      #content > .list > .about .about3 > .item > ul > li {
        float: left;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item > ul > li > img {
        position: absolute;
        transition: 1s top, 1s left;
      }

      /*第四屏 end*/
      /*第五屏 strat*/
      #content > .list > .team .team1 {
        width: 400px;
        margin: 50px;
        float: left;
      }
      #content > .list > .team .team2 {
        width: 400px;
        margin: 50px;
        float: right;
      }
      #content > .list > .team .team3 {
        width: 944px;
        height: 448px;
        position: absolute;
        left: 50%;
        margin-left: -472px;
        top: 250px;
      }
      #content > .list > .team .team3 ul {
        position: relative;
        height: 100%;
      }
      #content > .list > .team .team3 ul > li:nth-child(1) {
        background-position: 0, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(2) {
        background-position: -118px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(3) {
        background-position: -236px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(4) {
        background-position: -354px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(5) {
        background-position: -472px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(6) {
        background-position: -590px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(7) {
        background-position: -708px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(8) {
        background-position: -826px, 0;
      }
      #content > .list > .team canvas {
        position: absolute;
        top: 0px;
      }

      /*第五屏 end*/

      /*小圆点*/
      #content > .dot {
        position: fixed;
        right: 10px;
        top: 50%;
      }
      #content > .dot > li {
        width: 10px;
        height: 10px;
        border: 5px solid pink;
        margin-top: 10px;
        border-radius: 50%;
      }
      #content > .dot > li.active {
        background: white;
      }

      /*内容区样式 结束*/

      /*出入场*/
      #content > .list > .home .home1,
      #content > .list > .home .home2 {
        transition: 1s transform, 1s opacity;
      }
      #content > .list > .about .about3 > .item,
      #content > .list > .team .team1,
      #content > .list > .team .team2 {
        transition: 1s transform;
      }

      /*音频*/

      /*开机动画*/
      #mask {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 100;
      }
      #mask .up {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
      }
      #mask .down {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
        position: absolute;
        bottom: 0;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      #wrap {
        height: 100%;
      }
      html,
      body,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      li {
        margin: 0px;
        padding: 0px;
        font: 14px "微软雅黑";
      }
      a {
        text-decoration: none;
        display: block;
      }
      li {
        list-style: none;
      }
      img {
        display: block;
      }
      /*css reset 结束*/

      /*common css 开始*/
      .clearfix {
        *zoom: 1;
      }
      .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
      .commonTitle {
        color: #009ee0;
        font-size: 80px;
        line-height: 0.8;
        font-weight: bold;
        letter-spacing: -5px;
      }
      .commonText {
        color: white;
        line-height: 1.5;
        font-size: 15px;
      }
      /*common css 结束*/

      /*头部样式 开始*/
      #head {
        background: white !important;
        width: 100%;
      }
      #head .headMain {
        width: 1100px;
        height: 80px;
        margin: 0 auto;
        position: relative;
      }
      #head .headMain > .logo {
        float: left;
        margin-top: 30px;
      }
      #head .headMain > .nav {
        float: right;
        margin-top: 50px;
      }
      #head .headMain > .nav > .list > li {
        float: left;
        margin-left: 40px;
        position: relative;
      }
      #head .headMain > .nav > .list > li .up {
        color: #000000;
        position: absolute;
        width: 0;
        overflow: hidden;
        transition: 1s width;
      }
      #head .headMain > .nav > .list > li:hover .up {
        width: 100%;
      }

      /*头部样式 结束*/

      /*内容区样式 开始*/
      #content {
        background: gray;
        position: relative;
        overflow: hidden;
        width: 100%;
      }
      #content > .list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transition: 1s top;
      }
      #content > .list > li {
        position: relative;
        background-position: 50% 50% !important;
        overflow: hidden;
      }
      #content > .list > li > section {
        width: 1100px;
        height: 520px;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
      /*第三屏 start*/
      #content > .list > .works .works1 {
        margin: 50px 0px 100px 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 {
        margin-left: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 > .item {
        float: left;
        width: 220px;
        height: 133px;
        margin: 0 1px;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .works .works2 > .item:last-of-type {
        width: 332px;
      }

      #content > .list > .works .works2 > .item .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        padding: 10px;
        background: #000000;
        opacity: 0;
        color: white;
        transition: 1s opacity;
      }
      #content > .list > .works .works2 > .item .mask .icon {
        width: 32px;
        height: 34px;
        margin: 0 auto;
        margin-top: 10px;
        transition: 1s background-position;
      }
      #content > .list > .works .works2 > .item img {
        transition: 1s transform;
      }

      #content > .list > .works .works2 > .item .mask .icon:hover {
        background-position: 0 -35px;
      }
      #content > .list > .works .works2 > .item:hover .mask {
        opacity: 0.8;
      }
      #content > .list > .works .works2 > .item:hover img {
        transform: rotate(30deg) scale(1.5);
      }

      @keyframes works3Move {
        0% {
          transform: translateX(0px) rotateY(0deg);
        }
        49% {
          transform: translateX(-490px) rotateY(0deg);
        }
        50% {
          transform: translateX(-500px) rotateY(180deg);
        }
        100% {
          transform: translateX(0px) rotateY(180deg);
        }
      }
      /*第三屏 end*/

      /*第二屏 start*/
      #content > .list > .course .course1 {
        margin: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course2 {
        margin-left: 50px;
        width: 400px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course3 {
        width: 480px;
        position: absolute;
        z-index: 2;
        right: 50px;
        top: 70px;
      }
      #content > .list > .course .course3 .line {
        position: absolute;
        top: -7px;
        width: 9px;
        height: 410px;
      }

      #content > .list > .course .course3 .line:nth-of-type(1) {
        left: -5px;
      }
      #content > .list > .course .course3 .line:nth-of-type(2) {
        left: 115px;
      }
      #content > .list > .course .course3 .line:nth-of-type(3) {
        left: 235px;
      }
      #content > .list > .course .course3 .line:nth-of-type(4) {
        left: 355px;
      }
      #content > .list > .course .course3 .line:nth-of-type(5) {
        left: 475px;
      }

      #content > .list > .course .course3 .item {
        float: left;
        width: 120px;
        height: 132px;
        position: relative;
        perspective: 500px;
        transform-style: preserve-3d;
      }
      #content > .list > .course .course3 .item .face,
      #content > .list > .course .course3 .item .backFace {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 15px;
        transition: 1s transform;
      }

      #content > .list > .course .course3 .item .backFace {
        background-position: 50% 50% !important;
      }

      #content > .list > .course .course3 .item:hover .face {
        transform: rotateY(360deg);
      }
      #content > .list > .course .course3 .item:hover .backFace {
        transform: rotateY(180deg);
      }
      /*第二屏 end*/

      /*第一屏 start*/
      #content > .list > .home .home1 {
        width: 100%;
        height: 100%;
        perspective: 1000px;
        transform-style: preserve-3d;
      }
      #content > .list > .home .home1 > li {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        visibility: hidden;
      }
      #content > .list > .home .home1 > li:nth-child(1) {
        background: #dc6c5f;
      }
      #content > .list > .home .home1 > li:nth-child(2) {
        background: #95dc84;
      }
      #content > .list > .home .home1 > li:nth-child(3) {
        background: #64b9d2;
      }
      #content > .list > .home .home1 > li:nth-child(4) {
        background: #000000;
      }
      #content > .list > .home .home1 > li > div {
        color: white;
        text-align: center;
        margin-top: 200px;
      }
      #content > .list > .home .home1 > li.active {
        visibility: visible;
      }

      #content > .list > .home .home2 {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
      }
      #content > .list > .home .home2 > li {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.5);
        display: inline-block;
        box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
        cursor: pointer;
      }
      #content > .list > .home .home2 > li.active {
        background: white;
        cursor: default;
      }

      /*从左往右 leftHide  rightShow*/
      #content > .list > .home .home1 > li.leftHide {
        visibility: hidden;
        animation: 1s leftHide 1 linear;
      }
      #content > .list > .home .home1 > li.rightShow {
        visibility: visible;
        animation: 1s rightShow 1 linear;
      }
      @keyframes leftHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }
      @keyframes rightShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
        }
      }
      /*从右往左 leftShow  rightHide*/
      #content > .list > .home .home1 > li.leftShow {
        visibility: visible;
        animation: 1s leftShow 1 linear;
      }
      #content > .list > .home .home1 > li.rightHide {
        visibility: hidden;
        animation: 1s rightHide 1 linear;
      }
      @keyframes leftShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
        }
      }
      @keyframes rightHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }

      /*第一屏 end*/
      /*第四屏 strat*/
      #content > .list > .about .about1 {
        margin: 50px 0 100px 50px;
      }
      #content > .list > .about .about2 {
        margin-left: 50px;
        width: 400px;
      }
      #content > .list > .about .about3 > .item {
        width: 260px;
        height: 200px;
        border: 5px solid rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        position: absolute;
        z-index: 2;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item:nth-child(1) {
        left: 750px;
        top: 50px;
      }
      #content > .list > .about .about3 > .item:nth-child(2) {
        left: 600px;
        top: 290px;
      }

      #content > .list > .about .about3 > .item > span,
      #content > .list > .about .about3 > .item > ul {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      #content > .list > .about .about3 > .item:hover span {
        transform: scale(1);
      }

      #content > .list > .about .about3 > .item > ul > li {
        float: left;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item > ul > li > img {
        position: absolute;
        transition: 1s top, 1s left;
      }

      /*第四屏 end*/
      /*第五屏 strat*/
      #content > .list > .team .team1 {
        width: 400px;
        margin: 50px;
        float: left;
      }
      #content > .list > .team .team2 {
        width: 400px;
        margin: 50px;
        float: right;
      }
      #content > .list > .team .team3 {
        width: 944px;
        height: 448px;
        position: absolute;
        left: 50%;
        margin-left: -472px;
        top: 250px;
      }
      #content > .list > .team .team3 ul {
        position: relative;
        height: 100%;
      }
      #content > .list > .team .team3 ul > li:nth-child(1) {
        background-position: 0, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(2) {
        background-position: -118px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(3) {
        background-position: -236px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(4) {
        background-position: -354px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(5) {
        background-position: -472px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(6) {
        background-position: -590px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(7) {
        background-position: -708px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(8) {
        background-position: -826px, 0;
      }
      #content > .list > .team canvas {
        position: absolute;
        top: 0px;
      }

      /*第五屏 end*/

      /*小圆点*/
      #content > .dot {
        position: fixed;
        right: 10px;
        top: 50%;
      }
      #content > .dot > li {
        width: 10px;
        height: 10px;
        border: 5px solid pink;
        margin-top: 10px;
        border-radius: 50%;
      }
      #content > .dot > li.active {
        background: white;
      }

      /*内容区样式 结束*/

      /*出入场*/
      #content > .list > .home .home1,
      #content > .list > .home .home2 {
        transition: 1s transform, 1s opacity;
      }
      #content > .list > .about .about3 > .item,
      #content > .list > .team .team1,
      #content > .list > .team .team2 {
        transition: 1s transform;
      }

      /*音频*/

      /*开机动画*/
      #mask {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 100;
      }
      #mask .up {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
      }
      #mask .down {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
        position: absolute;
        bottom: 0;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      #wrap {
        height: 100%;
      }
      html,
      body,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      li {
        margin: 0px;
        padding: 0px;
        font: 14px "微软雅黑";
      }
      a {
        text-decoration: none;
        display: block;
      }
      li {
        list-style: none;
      }
      img {
        display: block;
      }
      /*css reset 结束*/

      /*common css 开始*/
      .clearfix {
        *zoom: 1;
      }
      .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
      .commonTitle {
        color: #009ee0;
        font-size: 80px;
        line-height: 0.8;
        font-weight: bold;
        letter-spacing: -5px;
      }
      .commonText {
        color: white;
        line-height: 1.5;
        font-size: 15px;
      }
      /*common css 结束*/

      /*头部样式 开始*/
      #head {
        background: white !important;
        width: 100%;
      }
      #head .headMain {
        width: 1100px;
        height: 80px;
        margin: 0 auto;
        position: relative;
      }
      #head .headMain > .logo {
        float: left;
        margin-top: 30px;
      }
      #head .headMain > .nav {
        float: right;
        margin-top: 50px;
      }
      #head .headMain > .nav > .list > li {
        float: left;
        margin-left: 40px;
        position: relative;
      }
      #head .headMain > .nav > .list > li .up {
        color: #000000;
        position: absolute;
        width: 0;
        overflow: hidden;
        transition: 1s width;
      }
      #head .headMain > .nav > .list > li:hover .up {
        width: 100%;
      }

      /*头部样式 结束*/

      /*内容区样式 开始*/
      #content {
        background: gray;
        position: relative;
        overflow: hidden;
        width: 100%;
      }
      #content > .list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transition: 1s top;
      }
      #content > .list > li {
        position: relative;
        background-position: 50% 50% !important;
        overflow: hidden;
      }
      #content > .list > li > section {
        width: 1100px;
        height: 520px;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
      /*第三屏 start*/
      #content > .list > .works .works1 {
        margin: 50px 0px 100px 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 {
        margin-left: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 > .item {
        float: left;
        width: 220px;
        height: 133px;
        margin: 0 1px;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .works .works2 > .item:last-of-type {
        width: 332px;
      }

      #content > .list > .works .works2 > .item .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        padding: 10px;
        background: #000000;
        opacity: 0;
        color: white;
        transition: 1s opacity;
      }
      #content > .list > .works .works2 > .item .mask .icon {
        width: 32px;
        height: 34px;
        margin: 0 auto;
        margin-top: 10px;
        transition: 1s background-position;
      }
      #content > .list > .works .works2 > .item img {
        transition: 1s transform;
      }

      #content > .list > .works .works2 > .item .mask .icon:hover {
        background-position: 0 -35px;
      }
      #content > .list > .works .works2 > .item:hover .mask {
        opacity: 0.8;
      }
      #content > .list > .works .works2 > .item:hover img {
        transform: rotate(30deg) scale(1.5);
      }

      @keyframes works3Move {
        0% {
          transform: translateX(0px) rotateY(0deg);
        }
        49% {
          transform: translateX(-490px) rotateY(0deg);
        }
        50% {
          transform: translateX(-500px) rotateY(180deg);
        }
        100% {
          transform: translateX(0px) rotateY(180deg);
        }
      }
      /*第三屏 end*/

      /*第二屏 start*/
      #content > .list > .course .course1 {
        margin: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course2 {
        margin-left: 50px;
        width: 400px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course3 {
        width: 480px;
        position: absolute;
        z-index: 2;
        right: 50px;
        top: 70px;
      }

      #content > .list > .course .course3 .line {
        position: absolute;
        top: -7px;
        width: 9px;
        height: 410px;
      }

      #content > .list > .course .course3 .line:nth-of-type(1) {
        left: -5px;
      }
      #content > .list > .course .course3 .line:nth-of-type(2) {
        left: 115px;
      }
      #content > .list > .course .course3 .line:nth-of-type(3) {
        left: 235px;
      }
      #content > .list > .course .course3 .line:nth-of-type(4) {
        left: 355px;
      }
      #content > .list > .course .course3 .line:nth-of-type(5) {
        left: 475px;
      }

      #content > .list > .course .course3 .item {
        float: left;
        width: 120px;
        height: 132px;
        position: relative;
        perspective: 500px;
        transform-style: preserve-3d;
      }
      #content > .list > .course .course3 .item .face,
      #content > .list > .course .course3 .item .backFace {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 15px;
        transition: 1s transform;
      }

      #content > .list > .course .course3 .item .backFace {
        background-position: 50% 50% !important;
      }

      #content > .list > .course .course3 .item:hover .face {
        transform: rotateY(360deg);
      }
      #content > .list > .course .course3 .item:hover .backFace {
        transform: rotateY(180deg);
      }
      /*第二屏 end*/

      /*第一屏 start*/
      #content > .list > .home .home1 {
        width: 100%;
        height: 100%;
        perspective: 1000px;
        transform-style: preserve-3d;
      }
      #content > .list > .home .home1 > li {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        visibility: hidden;
      }
      #content > .list > .home .home1 > li:nth-child(1) {
        background: #dc6c5f;
      }
      #content > .list > .home .home1 > li:nth-child(2) {
        background: #95dc84;
      }
      #content > .list > .home .home1 > li:nth-child(3) {
        background: #64b9d2;
      }
      #content > .list > .home .home1 > li:nth-child(4) {
        background: #000000;
      }
      #content > .list > .home .home1 > li > div {
        color: white;
        text-align: center;
        margin-top: 200px;
      }
      #content > .list > .home .home1 > li.active {
        visibility: visible;
      }

      #content > .list > .home .home2 {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
      }
      #content > .list > .home .home2 > li {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.5);
        display: inline-block;
        box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
        cursor: pointer;
      }
      #content > .list > .home .home2 > li.active {
        background: white;
        cursor: default;
      }

      /*从左往右 leftHide  rightShow*/
      #content > .list > .home .home1 > li.leftHide {
        visibility: hidden;
        animation: 1s leftHide 1 linear;
      }
      #content > .list > .home .home1 > li.rightShow {
        visibility: visible;
        animation: 1s rightShow 1 linear;
      }
      @keyframes leftHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }
      @keyframes rightShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
        }
      }
      /*从右往左 leftShow  rightHide*/
      #content > .list > .home .home1 > li.leftShow {
        visibility: visible;
        animation: 1s leftShow 1 linear;
      }
      #content > .list > .home .home1 > li.rightHide {
        visibility: hidden;
        animation: 1s rightHide 1 linear;
      }
      @keyframes leftShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
        }
      }
      @keyframes rightHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }

      /*第一屏 end*/
      /*第四屏 strat*/
      #content > .list > .about .about1 {
        margin: 50px 0 100px 50px;
      }
      #content > .list > .about .about2 {
        margin-left: 50px;
        width: 400px;
      }
      #content > .list > .about .about3 > .item {
        width: 260px;
        height: 200px;
        border: 5px solid rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        position: absolute;
        z-index: 2;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item:nth-child(1) {
        left: 750px;
        top: 50px;
      }
      #content > .list > .about .about3 > .item:nth-child(2) {
        left: 600px;
        top: 290px;
      }

      #content > .list > .about .about3 > .item > span,
      #content > .list > .about .about3 > .item > ul {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      #content > .list > .about .about3 > .item:hover span {
        transform: scale(1);
      }

      #content > .list > .about .about3 > .item > ul > li {
        float: left;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item > ul > li > img {
        position: absolute;
        transition: 1s top, 1s left;
      }

      /*第四屏 end*/
      /*第五屏 strat*/
      #content > .list > .team .team1 {
        width: 400px;
        margin: 50px;
        float: left;
      }
      #content > .list > .team .team2 {
        width: 400px;
        margin: 50px;
        float: right;
      }
      #content > .list > .team .team3 {
        width: 944px;
        height: 448px;
        position: absolute;
        left: 50%;
        margin-left: -472px;
        top: 250px;
      }
      #content > .list > .team .team3 ul {
        position: relative;
        height: 100%;
      }
      #content > .list > .team .team3 ul > li:nth-child(1) {
        background-position: 0, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(2) {
        background-position: -118px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(3) {
        background-position: -236px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(4) {
        background-position: -354px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(5) {
        background-position: -472px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(6) {
        background-position: -590px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(7) {
        background-position: -708px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(8) {
        background-position: -826px, 0;
      }
      #content > .list > .team canvas {
        position: absolute;
        top: 0px;
      }

      /*第五屏 end*/

      /*小圆点*/
      #content > .dot {
        position: fixed;
        right: 10px;
        top: 50%;
      }
      #content > .dot > li {
        width: 10px;
        height: 10px;
        border: 5px solid pink;
        margin-top: 10px;
        border-radius: 50%;
      }
      #content > .dot > li.active {
        background: white;
      }

      /*内容区样式 结束*/

      /*出入场*/
      #content > .list > .home .home1,
      #content > .list > .home .home2 {
        transition: 1s transform, 1s opacity;
      }
      #content > .list > .about .about3 > .item,
      #content > .list > .team .team1,
      #content > .list > .team .team2 {
        transition: 1s transform;
      }

      /*音频*/

      /*开机动画*/
      #mask {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 100;
      }
      #mask .up {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
      }
      #mask .down {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
        position: absolute;
        bottom: 0;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      #wrap {
        height: 100%;
      }
      html,
      body,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      li {
        margin: 0px;
        padding: 0px;
        font: 14px "微软雅黑";
      }
      a {
        text-decoration: none;
        display: block;
      }
      li {
        list-style: none;
      }
      img {
        display: block;
      }
      /*css reset 结束*/

      /*common css 开始*/
      .clearfix {
        *zoom: 1;
      }
      .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
      .commonTitle {
        color: #009ee0;
        font-size: 80px;
        line-height: 0.8;
        font-weight: bold;
        letter-spacing: -5px;
      }
      .commonText {
        color: white;
        line-height: 1.5;
        font-size: 15px;
      }
      /*common css 结束*/

      /*头部样式 开始*/
      #head {
        background: white !important;
        width: 100%;
      }
      #head .headMain {
        width: 1100px;
        height: 80px;
        margin: 0 auto;
        position: relative;
      }
      #head .headMain > .logo {
        float: left;
        margin-top: 30px;
      }
      #head .headMain > .nav {
        float: right;
        margin-top: 50px;
      }
      #head .headMain > .nav > .list > li {
        float: left;
        margin-left: 40px;
        position: relative;
      }
      #head .headMain > .nav > .list > li .up {
        color: #000000;
        position: absolute;
        width: 0;
        overflow: hidden;
        transition: 1s width;
      }
      #head .headMain > .nav > .list > li:hover .up {
        width: 100%;
      }

      /*头部样式 结束*/

      /*内容区样式 开始*/
      #content {
        background: gray;
        position: relative;
        overflow: hidden;
        width: 100%;
      }
      #content > .list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transition: 1s top;
      }
      #content > .list > li {
        position: relative;
        background-position: 50% 50% !important;
        overflow: hidden;
      }
      #content > .list > li > section {
        width: 1100px;
        height: 520px;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
      /*第三屏 start*/
      #content > .list > .works .works1 {
        margin: 50px 0px 100px 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 {
        margin-left: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 > .item {
        float: left;
        width: 220px;
        height: 133px;
        margin: 0 1px;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .works .works2 > .item:last-of-type {
        width: 332px;
      }

      #content > .list > .works .works2 > .item .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        padding: 10px;
        background: #000000;
        opacity: 0;
        color: white;
        transition: 1s opacity;
      }
      #content > .list > .works .works2 > .item .mask .icon {
        width: 32px;
        height: 34px;
        margin: 0 auto;
        margin-top: 10px;
        transition: 1s background-position;
      }
      #content > .list > .works .works2 > .item img {
        transition: 1s transform;
      }

      #content > .list > .works .works2 > .item .mask .icon:hover {
        background-position: 0 -35px;
      }
      #content > .list > .works .works2 > .item:hover .mask {
        opacity: 0.8;
      }
      #content > .list > .works .works2 > .item:hover img {
        transform: rotate(30deg) scale(1.5);
      }

      @keyframes works3Move {
        0% {
          transform: translateX(0px) rotateY(0deg);
        }
        49% {
          transform: translateX(-490px) rotateY(0deg);
        }
        50% {
          transform: translateX(-500px) rotateY(180deg);
        }
        100% {
          transform: translateX(0px) rotateY(180deg);
        }
      }
      /*第三屏 end*/

      /*第二屏 start*/
      #content > .list > .course .course1 {
        margin: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course2 {
        margin-left: 50px;
        width: 400px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course3 {
        width: 480px;
        position: absolute;
        z-index: 2;
        right: 50px;
        top: 70px;
      }

      #content > .list > .course .course3 .line {
        position: absolute;
        top: -7px;
        width: 9px;
        height: 410px;
      }

      #content > .list > .course .course3 .line:nth-of-type(1) {
        left: -5px;
      }
      #content > .list > .course .course3 .line:nth-of-type(2) {
        left: 115px;
      }
      #content > .list > .course .course3 .line:nth-of-type(3) {
        left: 235px;
      }
      #content > .list > .course .course3 .line:nth-of-type(4) {
        left: 355px;
      }
      #content > .list > .course .course3 .line:nth-of-type(5) {
        left: 475px;
      }

      #content > .list > .course .course3 .item {
        float: left;
        width: 120px;
        height: 132px;
        position: relative;
        perspective: 500px;
        transform-style: preserve-3d;
      }
      #content > .list > .course .course3 .item .face,
      #content > .list > .course .course3 .item .backFace {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 15px;
        transition: 1s transform;
      }

      #content > .list > .course .course3 .item .backFace {
        background-position: 50% 50% !important;
      }

      #content > .list > .course .course3 .item:hover .face {
        transform: rotateY(360deg);
      }
      #content > .list > .course .course3 .item:hover .backFace {
        transform: rotateY(180deg);
      }
      /*第二屏 end*/

      /*第一屏 start*/
      #content > .list > .home .home1 {
        width: 100%;
        height: 100%;
        perspective: 1000px;
        transform-style: preserve-3d;
      }
      #content > .list > .home .home1 > li {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        visibility: hidden;
      }
      #content > .list > .home .home1 > li:nth-child(1) {
        background: #dc6c5f;
      }
      #content > .list > .home .home1 > li:nth-child(2) {
        background: #95dc84;
      }
      #content > .list > .home .home1 > li:nth-child(3) {
        background: #64b9d2;
      }
      #content > .list > .home .home1 > li:nth-child(4) {
        background: #000000;
      }
      #content > .list > .home .home1 > li > div {
        color: white;
        text-align: center;
        margin-top: 200px;
      }
      #content > .list > .home .home1 > li.active {
        visibility: visible;
      }

      #content > .list > .home .home2 {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
      }
      #content > .list > .home .home2 > li {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.5);
        display: inline-block;
        box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
        cursor: pointer;
      }
      #content > .list > .home .home2 > li.active {
        background: white;
        cursor: default;
      }

      /*从左往右 leftHide  rightShow*/
      #content > .list > .home .home1 > li.leftHide {
        visibility: hidden;
        animation: 1s leftHide 1 linear;
      }
      #content > .list > .home .home1 > li.rightShow {
        visibility: visible;
        animation: 1s rightShow 1 linear;
      }
      @keyframes leftHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }
      @keyframes rightShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
        }
      }
      /*从右往左 leftShow  rightHide*/
      #content > .list > .home .home1 > li.leftShow {
        visibility: visible;
        animation: 1s leftShow 1 linear;
      }
      #content > .list > .home .home1 > li.rightHide {
        visibility: hidden;
        animation: 1s rightHide 1 linear;
      }
      @keyframes leftShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
        }
      }
      @keyframes rightHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }

      /*第一屏 end*/
      /*第四屏 strat*/
      #content > .list > .about .about1 {
        margin: 50px 0 100px 50px;
      }
      #content > .list > .about .about2 {
        margin-left: 50px;
        width: 400px;
      }
      #content > .list > .about .about3 > .item {
        width: 260px;
        height: 200px;
        border: 5px solid rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        position: absolute;
        z-index: 2;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item:nth-child(1) {
        left: 750px;
        top: 50px;
      }
      #content > .list > .about .about3 > .item:nth-child(2) {
        left: 600px;
        top: 290px;
      }

      #content > .list > .about .about3 > .item > span,
      #content > .list > .about .about3 > .item > ul {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      #content > .list > .about .about3 > .item:hover span {
        transform: scale(1);
      }

      #content > .list > .about .about3 > .item > ul > li {
        float: left;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item > ul > li > img {
        position: absolute;
        transition: 1s top, 1s left;
      }

      /*第四屏 end*/
      /*第五屏 strat*/
      #content > .list > .team .team1 {
        width: 400px;
        margin: 50px;
        float: left;
      }
      #content > .list > .team .team2 {
        width: 400px;
        margin: 50px;
        float: right;
      }
      #content > .list > .team .team3 {
        width: 944px;
        height: 448px;
        position: absolute;
        left: 50%;
        margin-left: -472px;
        top: 250px;
      }
      #content > .list > .team .team3 ul {
        position: relative;
        height: 100%;
      }
      #content > .list > .team .team3 ul > li:nth-child(1) {
        background-position: 0, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(2) {
        background-position: -118px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(3) {
        background-position: -236px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(4) {
        background-position: -354px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(5) {
        background-position: -472px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(6) {
        background-position: -590px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(7) {
        background-position: -708px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(8) {
        background-position: -826px, 0;
      }
      #content > .list > .team canvas {
        position: absolute;
        top: 0px;
      }

      /*第五屏 end*/

      /*小圆点*/
      #content > .dot {
        position: fixed;
        right: 10px;
        top: 50%;
      }
      #content > .dot > li {
        width: 10px;
        height: 10px;
        border: 5px solid pink;
        margin-top: 10px;
        border-radius: 50%;
      }
      #content > .dot > li.active {
        background: white;
      }

      /*内容区样式 结束*/

      /*出入场*/
      #content > .list > .home .home1,
      #content > .list > .home .home2 {
        transition: 1s transform, 1s opacity;
      }
      #content > .list > .about .about3 > .item,
      #content > .list > .team .team1,
      #content > .list > .team .team2 {
        transition: 1s transform;
      }

      /*音频*/

      /*开机动画*/
      #mask {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 100;
      }
      #mask .up {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
      }
      #mask .down {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
        position: absolute;
        bottom: 0;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      #wrap {
        height: 100%;
      }
      html,
      body,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      li {
        margin: 0px;
        padding: 0px;
        font: 14px "微软雅黑";
      }
      a {
        text-decoration: none;
        display: block;
      }
      li {
        list-style: none;
      }
      img {
        display: block;
      }
      /*css reset 结束*/

      /*common css 开始*/
      .clearfix {
        *zoom: 1;
      }
      .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
      .commonTitle {
        color: #009ee0;
        font-size: 80px;
        line-height: 0.8;
        font-weight: bold;
        letter-spacing: -5px;
      }
      .commonText {
        color: white;
        line-height: 1.5;
        font-size: 15px;
      }
      /*common css 结束*/

      /*头部样式 开始*/
      #head {
        background: white !important;
        width: 100%;
      }
      #head .headMain {
        width: 1100px;
        height: 80px;
        margin: 0 auto;
        position: relative;
      }
      #head .headMain > .logo {
        float: left;
        margin-top: 30px;
      }
      #head .headMain > .nav {
        float: right;
        margin-top: 50px;
      }
      #head .headMain > .nav > .list > li {
        float: left;
        margin-left: 40px;
        position: relative;
      }
      #head .headMain > .nav > .list > li .up {
        color: #000000;
        position: absolute;
        width: 0;
        overflow: hidden;
        transition: 1s width;
      }
      #head .headMain > .nav > .list > li:hover .up {
        width: 100%;
      }

      /*头部样式 结束*/

      /*内容区样式 开始*/
      #content {
        background: gray;
        position: relative;
        overflow: hidden;
        width: 100%;
      }
      #content > .list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transition: 1s top;
      }
      #content > .list > li {
        position: relative;
        background-position: 50% 50% !important;
        overflow: hidden;
      }
      #content > .list > li > section {
        width: 1100px;
        height: 520px;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
      /*第三屏 start*/
      #content > .list > .works .works1 {
        margin: 50px 0px 100px 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 {
        margin-left: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 > .item {
        float: left;
        width: 220px;
        height: 133px;
        margin: 0 1px;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .works .works2 > .item:last-of-type {
        width: 332px;
      }

      #content > .list > .works .works2 > .item .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        padding: 10px;
        background: #000000;
        opacity: 0;
        color: white;
        transition: 1s opacity;
      }
      #content > .list > .works .works2 > .item .mask .icon {
        width: 32px;
        height: 34px;
        margin: 0 auto;
        margin-top: 10px;
        transition: 1s background-position;
      }
      #content > .list > .works .works2 > .item img {
        transition: 1s transform;
      }

      #content > .list > .works .works2 > .item .mask .icon:hover {
        background-position: 0 -35px;
      }
      #content > .list > .works .works2 > .item:hover .mask {
        opacity: 0.8;
      }
      #content > .list > .works .works2 > .item:hover img {
        transform: rotate(30deg) scale(1.5);
      }

      @keyframes works3Move {
        0% {
          transform: translateX(0px) rotateY(0deg);
        }
        49% {
          transform: translateX(-490px) rotateY(0deg);
        }
        50% {
          transform: translateX(-500px) rotateY(180deg);
        }
        100% {
          transform: translateX(0px) rotateY(180deg);
        }
      }
      /*第三屏 end*/

      /*第二屏 start*/
      #content > .list > .course .course1 {
        margin: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course2 {
        margin-left: 50px;
        width: 400px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course3 {
        width: 480px;
        position: absolute;
        z-index: 2;
        right: 50px;
        top: 70px;
      }

      #content > .list > .course .course3 .line {
        position: absolute;
        top: -7px;
        width: 9px;
        height: 410px;
      }

      #content > .list > .course .course3 .line:nth-of-type(1) {
        left: -5px;
      }
      #content > .list > .course .course3 .line:nth-of-type(2) {
        left: 115px;
      }
      #content > .list > .course .course3 .line:nth-of-type(3) {
        left: 235px;
      }
      #content > .list > .course .course3 .line:nth-of-type(4) {
        left: 355px;
      }
      #content > .list > .course .course3 .line:nth-of-type(5) {
        left: 475px;
      }

      #content > .list > .course .course3 .item {
        float: left;
        width: 120px;
        height: 132px;
        position: relative;
        perspective: 500px;
        transform-style: preserve-3d;
      }
      #content > .list > .course .course3 .item .face,
      #content > .list > .course .course3 .item .backFace {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 15px;
        transition: 1s transform;
      }

      #content > .list > .course .course3 .item .backFace {
        background-position: 50% 50% !important;
      }

      #content > .list > .course .course3 .item:hover .face {
        transform: rotateY(360deg);
      }
      #content > .list > .course .course3 .item:hover .backFace {
        transform: rotateY(180deg);
      }
      /*第二屏 end*/

      /*第一屏 start*/
      #content > .list > .home .home1 {
        width: 100%;
        height: 100%;
        perspective: 1000px;
        transform-style: preserve-3d;
      }
      #content > .list > .home .home1 > li {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        visibility: hidden;
      }
      #content > .list > .home .home1 > li:nth-child(1) {
        background: #dc6c5f;
      }
      #content > .list > .home .home1 > li:nth-child(2) {
        background: #95dc84;
      }
      #content > .list > .home .home1 > li:nth-child(3) {
        background: #64b9d2;
      }
      #content > .list > .home .home1 > li:nth-child(4) {
        background: #000000;
      }
      #content > .list > .home .home1 > li > div {
        color: white;
        text-align: center;
        margin-top: 200px;
      }
      #content > .list > .home .home1 > li.active {
        visibility: visible;
      }

      #content > .list > .home .home2 {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
      }
      #content > .list > .home .home2 > li {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.5);
        display: inline-block;
        box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
        cursor: pointer;
      }
      #content > .list > .home .home2 > li.active {
        background: white;
        cursor: default;
      }

      /*从左往右 leftHide  rightShow*/
      #content > .list > .home .home1 > li.leftHide {
        visibility: hidden;
        animation: 1s leftHide 1 linear;
      }
      #content > .list > .home .home1 > li.rightShow {
        visibility: visible;
        animation: 1s rightShow 1 linear;
      }
      @keyframes leftHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }
      @keyframes rightShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
        }
      }
      /*从右往左 leftShow  rightHide*/
      #content > .list > .home .home1 > li.leftShow {
        visibility: visible;
        animation: 1s leftShow 1 linear;
      }
      #content > .list > .home .home1 > li.rightHide {
        visibility: hidden;
        animation: 1s rightHide 1 linear;
      }
      @keyframes leftShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
        }
      }
      @keyframes rightHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }

      /*第一屏 end*/
      /*第四屏 strat*/
      #content > .list > .about .about1 {
        margin: 50px 0 100px 50px;
      }
      #content > .list > .about .about2 {
        margin-left: 50px;
        width: 400px;
      }
      #content > .list > .about .about3 > .item {
        width: 260px;
        height: 200px;
        border: 5px solid rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        position: absolute;
        z-index: 2;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item:nth-child(1) {
        left: 750px;
        top: 50px;
      }
      #content > .list > .about .about3 > .item:nth-child(2) {
        left: 600px;
        top: 290px;
      }

      #content > .list > .about .about3 > .item > span,
      #content > .list > .about .about3 > .item > ul {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      #content > .list > .about .about3 > .item:hover span {
        transform: scale(1);
      }

      #content > .list > .about .about3 > .item > ul > li {
        float: left;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item > ul > li > img {
        position: absolute;
        transition: 1s top, 1s left;
      }

      /*第四屏 end*/
      /*第五屏 strat*/
      #content > .list > .team .team1 {
        width: 400px;
        margin: 50px;
        float: left;
      }
      #content > .list > .team .team2 {
        width: 400px;
        margin: 50px;
        float: right;
      }
      #content > .list > .team .team3 {
        width: 944px;
        height: 448px;
        position: absolute;
        left: 50%;
        margin-left: -472px;
        top: 250px;
      }
      #content > .list > .team .team3 ul {
        position: relative;
        height: 100%;
      }
      #content > .list > .team .team3 ul > li:nth-child(1) {
        background-position: 0, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(2) {
        background-position: -118px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(3) {
        background-position: -236px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(4) {
        background-position: -354px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(5) {
        background-position: -472px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(6) {
        background-position: -590px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(7) {
        background-position: -708px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(8) {
        background-position: -826px, 0;
      }
      #content > .list > .team canvas {
        position: absolute;
        top: 0px;
      }

      /*第五屏 end*/

      /*小圆点*/
      #content > .dot {
        position: fixed;
        right: 10px;
        top: 50%;
      }
      #content > .dot > li {
        width: 10px;
        height: 10px;
        border: 5px solid pink;
        margin-top: 10px;
        border-radius: 50%;
      }
      #content > .dot > li.active {
        background: white;
      }

      /*内容区样式 结束*/

      /*出入场*/
      #content > .list > .home .home1,
      #content > .list > .home .home2 {
        transition: 1s transform, 1s opacity;
      }
      #content > .list > .about .about3 > .item,
      #content > .list > .team .team1,
      #content > .list > .team .team2 {
        transition: 1s transform;
      }

      /*音频*/

      /*开机动画*/
      #mask {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 100;
      }
      #mask .up {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
      }
      #mask .down {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
        position: absolute;
        bottom: 0;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      #wrap {
        height: 100%;
      }
      html,
      body,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      li {
        margin: 0px;
        padding: 0px;
        font: 14px "微软雅黑";
      }
      a {
        text-decoration: none;
        display: block;
      }
      li {
        list-style: none;
      }
      img {
        display: block;
      }
      /*css reset 结束*/

      /*common css 开始*/
      .clearfix {
        *zoom: 1;
      }
      .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
      .commonTitle {
        color: #009ee0;
        font-size: 80px;
        line-height: 0.8;
        font-weight: bold;
        letter-spacing: -5px;
      }
      .commonText {
        color: white;
        line-height: 1.5;
        font-size: 15px;
      }
      /*common css 结束*/

      /*头部样式 开始*/
      #head {
        background: white !important;
        width: 100%;
      }
      #head .headMain {
        width: 1100px;
        height: 80px;
        margin: 0 auto;
        position: relative;
      }
      #head .headMain > .logo {
        float: left;
        margin-top: 30px;
      }
      #head .headMain > .nav {
        float: right;
        margin-top: 50px;
      }
      #head .headMain > .nav > .list > li {
        float: left;
        margin-left: 40px;
        position: relative;
      }
      #head .headMain > .nav > .list > li .up {
        color: #000000;
        position: absolute;
        width: 0;
        overflow: hidden;
        transition: 1s width;
      }
      #head .headMain > .nav > .list > li:hover .up {
        width: 100%;
      }

      /*头部样式 结束*/

      /*内容区样式 开始*/
      #content {
        background: gray;
        position: relative;
        overflow: hidden;
        width: 100%;
      }
      #content > .list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transition: 1s top;
      }
      #content > .list > li {
        position: relative;
        background-position: 50% 50% !important;
        overflow: hidden;
      }
      #content > .list > li > section {
        width: 1100px;
        height: 520px;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
      /*第三屏 start*/
      #content > .list > .works .works1 {
        margin: 50px 0px 100px 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 {
        margin-left: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 > .item {
        float: left;
        width: 220px;
        height: 133px;
        margin: 0 1px;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .works .works2 > .item:last-of-type {
        width: 332px;
      }

      #content > .list > .works .works2 > .item .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        padding: 10px;
        background: #000000;
        opacity: 0;
        color: white;
        transition: 1s opacity;
      }
      #content > .list > .works .works2 > .item .mask .icon {
        width: 32px;
        height: 34px;
        margin: 0 auto;
        margin-top: 10px;
        transition: 1s background-position;
      }
      #content > .list > .works .works2 > .item img {
        transition: 1s transform;
      }

      #content > .list > .works .works2 > .item .mask .icon:hover {
        background-position: 0 -35px;
      }
      #content > .list > .works .works2 > .item:hover .mask {
        opacity: 0.8;
      }
      #content > .list > .works .works2 > .item:hover img {
        transform: rotate(30deg) scale(1.5);
      }

      @keyframes works3Move {
        0% {
          transform: translateX(0px) rotateY(0deg);
        }
        49% {
          transform: translateX(-490px) rotateY(0deg);
        }
        50% {
          transform: translateX(-500px) rotateY(180deg);
        }
        100% {
          transform: translateX(0px) rotateY(180deg);
        }
      }
      /*第三屏 end*/

      /*第二屏 start*/
      #content > .list > .course .course1 {
        margin: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course2 {
        margin-left: 50px;
        width: 400px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course3 {
        width: 480px;
        position: absolute;
        z-index: 2;
        right: 50px;
        top: 70px;
      }

      #content > .list > .course .course3 .line {
        position: absolute;
        top: -7px;
        width: 9px;
        height: 410px;
      }

      #content > .list > .course .course3 .line:nth-of-type(1) {
        left: -5px;
      }
      #content > .list > .course .course3 .line:nth-of-type(2) {
        left: 115px;
      }
      #content > .list > .course .course3 .line:nth-of-type(3) {
        left: 235px;
      }
      #content > .list > .course .course3 .line:nth-of-type(4) {
        left: 355px;
      }
      #content > .list > .course .course3 .line:nth-of-type(5) {
        left: 475px;
      }

      #content > .list > .course .course3 .item {
        float: left;
        width: 120px;
        height: 132px;
        position: relative;
        perspective: 500px;
        transform-style: preserve-3d;
      }
      #content > .list > .course .course3 .item .face,
      #content > .list > .course .course3 .item .backFace {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 15px;
        transition: 1s transform;
      }

      #content > .list > .course .course3 .item .backFace {
        background-position: 50% 50% !important;
      }

      #content > .list > .course .course3 .item:hover .face {
        transform: rotateY(360deg);
      }
      #content > .list > .course .course3 .item:hover .backFace {
        transform: rotateY(180deg);
      }
      /*第二屏 end*/

      /*第一屏 start*/
      #content > .list > .home .home1 {
        width: 100%;
        height: 100%;
        perspective: 1000px;
        transform-style: preserve-3d;
      }
      #content > .list > .home .home1 > li {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        visibility: hidden;
      }
      #content > .list > .home .home1 > li:nth-child(1) {
        background: #dc6c5f;
      }
      #content > .list > .home .home1 > li:nth-child(2) {
        background: #95dc84;
      }
      #content > .list > .home .home1 > li:nth-child(3) {
        background: #64b9d2;
      }
      #content > .list > .home .home1 > li:nth-child(4) {
        background: #000000;
      }
      #content > .list > .home .home1 > li > div {
        color: white;
        text-align: center;
        margin-top: 200px;
      }
      #content > .list > .home .home1 > li.active {
        visibility: visible;
      }

      #content > .list > .home .home2 {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
      }
      #content > .list > .home .home2 > li {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.5);
        display: inline-block;
        box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
        cursor: pointer;
      }
      #content > .list > .home .home2 > li.active {
        background: white;
        cursor: default;
      }

      /*从左往右 leftHide  rightShow*/
      #content > .list > .home .home1 > li.leftHide {
        visibility: hidden;
        animation: 1s leftHide 1 linear;
      }
      #content > .list > .home .home1 > li.rightShow {
        visibility: visible;
        animation: 1s rightShow 1 linear;
      }
      @keyframes leftHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }
      @keyframes rightShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
        }
      }
      /*从右往左 leftShow  rightHide*/
      #content > .list > .home .home1 > li.leftShow {
        visibility: visible;
        animation: 1s leftShow 1 linear;
      }
      #content > .list > .home .home1 > li.rightHide {
        visibility: hidden;
        animation: 1s rightHide 1 linear;
      }
      @keyframes leftShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
        }
      }
      @keyframes rightHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }

      /*第一屏 end*/
      /*第四屏 strat*/
      #content > .list > .about .about1 {
        margin: 50px 0 100px 50px;
      }
      #content > .list > .about .about2 {
        margin-left: 50px;
        width: 400px;
      }
      #content > .list > .about .about3 > .item {
        width: 260px;
        height: 200px;
        border: 5px solid rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        position: absolute;
        z-index: 2;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item:nth-child(1) {
        left: 750px;
        top: 50px;
      }
      #content > .list > .about .about3 > .item:nth-child(2) {
        left: 600px;
        top: 290px;
      }

      #content > .list > .about .about3 > .item > span,
      #content > .list > .about .about3 > .item > ul {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      #content > .list > .about .about3 > .item:hover span {
        transform: scale(1);
      }

      #content > .list > .about .about3 > .item > ul > li {
        float: left;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item > ul > li > img {
        position: absolute;
        transition: 1s top, 1s left;
      }

      /*第四屏 end*/
      /*第五屏 strat*/
      #content > .list > .team .team1 {
        width: 400px;
        margin: 50px;
        float: left;
      }
      #content > .list > .team .team2 {
        width: 400px;
        margin: 50px;
        float: right;
      }
      #content > .list > .team .team3 {
        width: 944px;
        height: 448px;
        position: absolute;
        left: 50%;
        margin-left: -472px;
        top: 250px;
      }
      #content > .list > .team .team3 ul {
        position: relative;
        height: 100%;
      }
      #content > .list > .team .team3 ul > li:nth-child(1) {
        background-position: 0, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(2) {
        background-position: -118px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(3) {
        background-position: -236px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(4) {
        background-position: -354px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(5) {
        background-position: -472px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(6) {
        background-position: -590px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(7) {
        background-position: -708px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(8) {
        background-position: -826px, 0;
      }
      #content > .list > .team canvas {
        position: absolute;
        top: 0px;
      }

      /*第五屏 end*/

      /*小圆点*/
      #content > .dot {
        position: fixed;
        right: 10px;
        top: 50%;
      }
      #content > .dot > li {
        width: 10px;
        height: 10px;
        border: 5px solid pink;
        margin-top: 10px;
        border-radius: 50%;
      }
      #content > .dot > li.active {
        background: white;
      }

      /*内容区样式 结束*/

      /*出入场*/
      #content > .list > .home .home1,
      #content > .list > .home .home2 {
        transition: 1s transform, 1s opacity;
      }
      #content > .list > .about .about3 > .item,
      #content > .list > .team .team1,
      #content > .list > .team .team2 {
        transition: 1s transform;
      }

      /*音频*/

      /*开机动画*/
      #mask {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 100;
      }
      #mask .up {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
      }
      #mask .down {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
        position: absolute;
        bottom: 0;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      #wrap {
        height: 100%;
      }
      html,
      body,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      li {
        margin: 0px;
        padding: 0px;
        font: 14px "微软雅黑";
      }
      a {
        text-decoration: none;
        display: block;
      }
      li {
        list-style: none;
      }
      img {
        display: block;
      }
      /*css reset 结束*/

      /*common css 开始*/
      .clearfix {
        *zoom: 1;
      }
      .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
      .commonTitle {
        color: #009ee0;
        font-size: 80px;
        line-height: 0.8;
        font-weight: bold;
        letter-spacing: -5px;
      }
      .commonText {
        color: white;
        line-height: 1.5;
        font-size: 15px;
      }
      /*common css 结束*/

      /*头部样式 开始*/
      #head {
        background: white !important;
        width: 100%;
      }
      #head .headMain {
        width: 1100px;
        height: 80px;
        margin: 0 auto;
        position: relative;
      }
      #head .headMain > .logo {
        float: left;
        margin-top: 30px;
      }
      #head .headMain > .nav {
        float: right;
        margin-top: 50px;
      }
      #head .headMain > .nav > .list > li {
        float: left;
        margin-left: 40px;
        position: relative;
      }
      #head .headMain > .nav > .list > li .up {
        color: #000000;
        position: absolute;
        width: 0;
        overflow: hidden;
        transition: 1s width;
      }
      #head .headMain > .nav > .list > li:hover .up {
        width: 100%;
      }

      /*头部样式 结束*/

      /*内容区样式 开始*/
      #content {
        background: gray;
        position: relative;
        overflow: hidden;
        width: 100%;
      }
      #content > .list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transition: 1s top;
      }
      #content > .list > li {
        position: relative;
        background-position: 50% 50% !important;
        overflow: hidden;
      }
      #content > .list > li > section {
        width: 1100px;
        height: 520px;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
      /*第三屏 start*/
      #content > .list > .works .works1 {
        margin: 50px 0px 100px 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 {
        margin-left: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 > .item {
        float: left;
        width: 220px;
        height: 133px;
        margin: 0 1px;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .works .works2 > .item:last-of-type {
        width: 332px;
      }

      #content > .list > .works .works2 > .item .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        padding: 10px;
        background: #000000;
        opacity: 0;
        color: white;
        transition: 1s opacity;
      }
      #content > .list > .works .works2 > .item .mask .icon {
        width: 32px;
        height: 34px;
        margin: 0 auto;
        margin-top: 10px;
        transition: 1s background-position;
      }
      #content > .list > .works .works2 > .item img {
        transition: 1s transform;
      }

      #content > .list > .works .works2 > .item .mask .icon:hover {
        background-position: 0 -35px;
      }
      #content > .list > .works .works2 > .item:hover .mask {
        opacity: 0.8;
      }
      #content > .list > .works .works2 > .item:hover img {
        transform: rotate(30deg) scale(1.5);
      }

      @keyframes works3Move {
        0% {
          transform: translateX(0px) rotateY(0deg);
        }
        49% {
          transform: translateX(-490px) rotateY(0deg);
        }
        50% {
          transform: translateX(-500px) rotateY(180deg);
        }
        100% {
          transform: translateX(0px) rotateY(180deg);
        }
      }
      /*第三屏 end*/

      /*第二屏 start*/
      #content > .list > .course .course1 {
        margin: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course2 {
        margin-left: 50px;
        width: 400px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course3 {
        width: 480px;
        position: absolute;
        z-index: 2;
        right: 50px;
        top: 70px;
      }

      #content > .list > .course .course3 .line {
        position: absolute;
        top: -7px;
        width: 9px;
        height: 410px;
      }

      #content > .list > .course .course3 .line:nth-of-type(1) {
        left: -5px;
      }
      #content > .list > .course .course3 .line:nth-of-type(2) {
        left: 115px;
      }
      #content > .list > .course .course3 .line:nth-of-type(3) {
        left: 235px;
      }
      #content > .list > .course .course3 .line:nth-of-type(4) {
        left: 355px;
      }
      #content > .list > .course .course3 .line:nth-of-type(5) {
        left: 475px;
      }

      #content > .list > .course .course3 .item {
        float: left;
        width: 120px;
        height: 132px;
        position: relative;
        perspective: 500px;
        transform-style: preserve-3d;
      }
      #content > .list > .course .course3 .item .face,
      #content > .list > .course .course3 .item .backFace {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 15px;
        transition: 1s transform;
      }

      #content > .list > .course .course3 .item .backFace {
        background-position: 50% 50% !important;
      }

      #content > .list > .course .course3 .item:hover .face {
        transform: rotateY(360deg);
      }
      #content > .list > .course .course3 .item:hover .backFace {
        transform: rotateY(180deg);
      }
      /*第二屏 end*/

      /*第一屏 start*/
      #content > .list > .home .home1 {
        width: 100%;
        height: 100%;
        perspective: 1000px;
        transform-style: preserve-3d;
      }
      #content > .list > .home .home1 > li {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        visibility: hidden;
      }
      #content > .list > .home .home1 > li:nth-child(1) {
        background: #dc6c5f;
      }
      #content > .list > .home .home1 > li:nth-child(2) {
        background: #95dc84;
      }
      #content > .list > .home .home1 > li:nth-child(3) {
        background: #64b9d2;
      }
      #content > .list > .home .home1 > li:nth-child(4) {
        background: #000000;
      }
      #content > .list > .home .home1 > li > div {
        color: white;
        text-align: center;
        margin-top: 200px;
      }
      #content > .list > .home .home1 > li.active {
        visibility: visible;
      }

      #content > .list > .home .home2 {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
      }
      #content > .list > .home .home2 > li {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.5);
        display: inline-block;
        box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
        cursor: pointer;
      }
      #content > .list > .home .home2 > li.active {
        background: white;
        cursor: default;
      }

      /*从左往右 leftHide  rightShow*/
      #content > .list > .home .home1 > li.leftHide {
        visibility: hidden;
        animation: 1s leftHide 1 linear;
      }
      #content > .list > .home .home1 > li.rightShow {
        visibility: visible;
        animation: 1s rightShow 1 linear;
      }
      @keyframes leftHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }
      @keyframes rightShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
        }
      }
      /*从右往左 leftShow  rightHide*/
      #content > .list > .home .home1 > li.leftShow {
        visibility: visible;
        animation: 1s leftShow 1 linear;
      }
      #content > .list > .home .home1 > li.rightHide {
        visibility: hidden;
        animation: 1s rightHide 1 linear;
      }
      @keyframes leftShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
        }
      }
      @keyframes rightHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }

      /*第一屏 end*/
      /*第四屏 strat*/
      #content > .list > .about .about1 {
        margin: 50px 0 100px 50px;
      }
      #content > .list > .about .about2 {
        margin-left: 50px;
        width: 400px;
      }
      #content > .list > .about .about3 > .item {
        width: 260px;
        height: 200px;
        border: 5px solid rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        position: absolute;
        z-index: 2;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item:nth-child(1) {
        left: 750px;
        top: 50px;
      }
      #content > .list > .about .about3 > .item:nth-child(2) {
        left: 600px;
        top: 290px;
      }

      #content > .list > .about .about3 > .item > span,
      #content > .list > .about .about3 > .item > ul {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      #content > .list > .about .about3 > .item:hover span {
        transform: scale(1);
      }

      #content > .list > .about .about3 > .item > ul > li {
        float: left;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item > ul > li > img {
        position: absolute;
        transition: 1s top, 1s left;
      }

      /*第四屏 end*/
      /*第五屏 strat*/
      #content > .list > .team .team1 {
        width: 400px;
        margin: 50px;
        float: left;
      }
      #content > .list > .team .team2 {
        width: 400px;
        margin: 50px;
        float: right;
      }
      #content > .list > .team .team3 {
        width: 944px;
        height: 448px;
        position: absolute;
        left: 50%;
        margin-left: -472px;
        top: 250px;
      }
      #content > .list > .team .team3 ul {
        position: relative;
        height: 100%;
      }
      #content > .list > .team .team3 ul > li:nth-child(1) {
        background-position: 0, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(2) {
        background-position: -118px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(3) {
        background-position: -236px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(4) {
        background-position: -354px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(5) {
        background-position: -472px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(6) {
        background-position: -590px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(7) {
        background-position: -708px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(8) {
        background-position: -826px, 0;
      }
      #content > .list > .team canvas {
        position: absolute;
        top: 0px;
      }

      /*第五屏 end*/

      /*小圆点*/
      #content > .dot {
        position: fixed;
        right: 10px;
        top: 50%;
      }
      #content > .dot > li {
        width: 10px;
        height: 10px;
        border: 5px solid pink;
        margin-top: 10px;
        border-radius: 50%;
      }
      #content > .dot > li.active {
        background: white;
      }

      /*内容区样式 结束*/

      /*出入场*/
      #content > .list > .home .home1,
      #content > .list > .home .home2 {
        transition: 1s transform, 1s opacity;
      }
      #content > .list > .about .about3 > .item,
      #content > .list > .team .team1,
      #content > .list > .team .team2 {
        transition: 1s transform;
      }

      /*音频*/

      /*开机动画*/
      #mask {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 100;
      }
      #mask .up {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
      }
      #mask .down {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
        position: absolute;
        bottom: 0;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      #wrap {
        height: 100%;
      }
      html,
      body,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      li {
        margin: 0px;
        padding: 0px;
        font: 14px "微软雅黑";
      }
      a {
        text-decoration: none;
        display: block;
      }
      li {
        list-style: none;
      }
      img {
        display: block;
      }
      /*css reset 结束*/

      /*common css 开始*/
      .clearfix {
        *zoom: 1;
      }
      .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
      .commonTitle {
        color: #009ee0;
        font-size: 80px;
        line-height: 0.8;
        font-weight: bold;
        letter-spacing: -5px;
      }
      .commonText {
        color: white;
        line-height: 1.5;
        font-size: 15px;
      }
      /*common css 结束*/

      /*头部样式 开始*/
      #head {
        background: white !important;
        width: 100%;
      }
      #head .headMain {
        width: 1100px;
        height: 80px;
        margin: 0 auto;
        position: relative;
      }
      #head .headMain > .logo {
        float: left;
        margin-top: 30px;
      }
      #head .headMain > .nav {
        float: right;
        margin-top: 50px;
      }
      #head .headMain > .nav > .list > li {
        float: left;
        margin-left: 40px;
        position: relative;
      }
      #head .headMain > .nav > .list > li .up {
        color: #000000;
        position: absolute;
        width: 0;
        overflow: hidden;
        transition: 1s width;
      }
      #head .headMain > .nav > .list > li:hover .up {
        width: 100%;
      }

      /*头部样式 结束*/

      /*内容区样式 开始*/
      #content {
        background: gray;
        position: relative;
        overflow: hidden;
        width: 100%;
      }
      #content > .list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transition: 1s top;
      }
      #content > .list > li {
        position: relative;
        background-position: 50% 50% !important;
        overflow: hidden;
      }
      #content > .list > li > section {
        width: 1100px;
        height: 520px;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
      /*第三屏 start*/
      #content > .list > .works .works1 {
        margin: 50px 0px 100px 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 {
        margin-left: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 > .item {
        float: left;
        width: 220px;
        height: 133px;
        margin: 0 1px;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .works .works2 > .item:last-of-type {
        width: 332px;
      }

      #content > .list > .works .works2 > .item .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        padding: 10px;
        background: #000000;
        opacity: 0;
        color: white;
        transition: 1s opacity;
      }
      #content > .list > .works .works2 > .item .mask .icon {
        width: 32px;
        height: 34px;
        margin: 0 auto;
        margin-top: 10px;
        transition: 1s background-position;
      }
      #content > .list > .works .works2 > .item img {
        transition: 1s transform;
      }

      #content > .list > .works .works2 > .item .mask .icon:hover {
        background-position: 0 -35px;
      }
      #content > .list > .works .works2 > .item:hover .mask {
        opacity: 0.8;
      }
      #content > .list > .works .works2 > .item:hover img {
        transform: rotate(30deg) scale(1.5);
      }

      @keyframes works3Move {
        0% {
          transform: translateX(0px) rotateY(0deg);
        }
        49% {
          transform: translateX(-490px) rotateY(0deg);
        }
        50% {
          transform: translateX(-500px) rotateY(180deg);
        }
        100% {
          transform: translateX(0px) rotateY(180deg);
        }
      }
      /*第三屏 end*/

      /*第二屏 start*/
      #content > .list > .course .course1 {
        margin: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course2 {
        margin-left: 50px;
        width: 400px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course3 {
        width: 480px;
        position: absolute;
        z-index: 2;
        right: 50px;
        top: 70px;
      }

      #content > .list > .course .course3 .line {
        position: absolute;
        top: -7px;
        width: 9px;
        height: 410px;
      }

      #content > .list > .course .course3 .line:nth-of-type(1) {
        left: -5px;
      }
      #content > .list > .course .course3 .line:nth-of-type(2) {
        left: 115px;
      }
      #content > .list > .course .course3 .line:nth-of-type(3) {
        left: 235px;
      }
      #content > .list > .course .course3 .line:nth-of-type(4) {
        left: 355px;
      }
      #content > .list > .course .course3 .line:nth-of-type(5) {
        left: 475px;
      }

      #content > .list > .course .course3 .item {
        float: left;
        width: 120px;
        height: 132px;
        position: relative;
        perspective: 500px;
        transform-style: preserve-3d;
      }
      #content > .list > .course .course3 .item .face,
      #content > .list > .course .course3 .item .backFace {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 15px;
        transition: 1s transform;
      }

      #content > .list > .course .course3 .item .backFace {
        background-position: 50% 50% !important;
      }

      #content > .list > .course .course3 .item:hover .face {
        transform: rotateY(360deg);
      }
      #content > .list > .course .course3 .item:hover .backFace {
        transform: rotateY(180deg);
      }
      /*第二屏 end*/

      /*第一屏 start*/
      #content > .list > .home .home1 {
        width: 100%;
        height: 100%;
        perspective: 1000px;
        transform-style: preserve-3d;
      }
      #content > .list > .home .home1 > li {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        visibility: hidden;
      }
      #content > .list > .home .home1 > li:nth-child(1) {
        background: #dc6c5f;
      }
      #content > .list > .home .home1 > li:nth-child(2) {
        background: #95dc84;
      }
      #content > .list > .home .home1 > li:nth-child(3) {
        background: #64b9d2;
      }
      #content > .list > .home .home1 > li:nth-child(4) {
        background: #000000;
      }
      #content > .list > .home .home1 > li > div {
        color: white;
        text-align: center;
        margin-top: 200px;
      }
      #content > .list > .home .home1 > li.active {
        visibility: visible;
      }

      #content > .list > .home .home2 {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
      }
      #content > .list > .home .home2 > li {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.5);
        display: inline-block;
        box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
        cursor: pointer;
      }
      #content > .list > .home .home2 > li.active {
        background: white;
        cursor: default;
      }

      /*从左往右 leftHide  rightShow*/
      #content > .list > .home .home1 > li.leftHide {
        visibility: hidden;
        animation: 1s leftHide 1 linear;
      }
      #content > .list > .home .home1 > li.rightShow {
        visibility: visible;
        animation: 1s rightShow 1 linear;
      }
      @keyframes leftHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }
      @keyframes rightShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
        }
      }
      /*从右往左 leftShow  rightHide*/
      #content > .list > .home .home1 > li.leftShow {
        visibility: visible;
        animation: 1s leftShow 1 linear;
      }
      #content > .list > .home .home1 > li.rightHide {
        visibility: hidden;
        animation: 1s rightHide 1 linear;
      }
      @keyframes leftShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
        }
      }
      @keyframes rightHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }

      /*第一屏 end*/
      /*第四屏 strat*/
      #content > .list > .about .about1 {
        margin: 50px 0 100px 50px;
      }
      #content > .list > .about .about2 {
        margin-left: 50px;
        width: 400px;
      }
      #content > .list > .about .about3 > .item {
        width: 260px;
        height: 200px;
        border: 5px solid rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        position: absolute;
        z-index: 2;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item:nth-child(1) {
        left: 750px;
        top: 50px;
      }
      #content > .list > .about .about3 > .item:nth-child(2) {
        left: 600px;
        top: 290px;
      }

      #content > .list > .about .about3 > .item > span,
      #content > .list > .about .about3 > .item > ul {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      #content > .list > .about .about3 > .item:hover span {
        transform: scale(1);
      }

      #content > .list > .about .about3 > .item > ul > li {
        float: left;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item > ul > li > img {
        position: absolute;
        transition: 1s top, 1s left;
      }

      /*第四屏 end*/
      /*第五屏 strat*/
      #content > .list > .team .team1 {
        width: 400px;
        margin: 50px;
        float: left;
      }
      #content > .list > .team .team2 {
        width: 400px;
        margin: 50px;
        float: right;
      }
      #content > .list > .team .team3 {
        width: 944px;
        height: 448px;
        position: absolute;
        left: 50%;
        margin-left: -472px;
        top: 250px;
      }
      #content > .list > .team .team3 ul {
        position: relative;
        height: 100%;
      }
      #content > .list > .team .team3 ul > li:nth-child(1) {
        background-position: 0, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(2) {
        background-position: -118px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(3) {
        background-position: -236px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(4) {
        background-position: -354px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(5) {
        background-position: -472px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(6) {
        background-position: -590px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(7) {
        background-position: -708px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(8) {
        background-position: -826px, 0;
      }
      #content > .list > .team canvas {
        position: absolute;
        top: 0px;
      }

      /*第五屏 end*/

      /*小圆点*/
      #content > .dot {
        position: fixed;
        right: 10px;
        top: 50%;
      }
      #content > .dot > li {
        width: 10px;
        height: 10px;
        border: 5px solid pink;
        margin-top: 10px;
        border-radius: 50%;
      }
      #content > .dot > li.active {
        background: white;
      }

      /*内容区样式 结束*/

      /*出入场*/
      #content > .list > .home .home1,
      #content > .list > .home .home2 {
        transition: 1s transform, 1s opacity;
      }
      #content > .list > .about .about3 > .item,
      #content > .list > .team .team1,
      #content > .list > .team .team2 {
        transition: 1s transform;
      }

      /*音频*/

      /*开机动画*/
      #mask {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 100;
      }
      #mask .up {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
      }
      #mask .down {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
        position: absolute;
        bottom: 0;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      #wrap {
        height: 100%;
      }
      html,
      body,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      li {
        margin: 0px;
        padding: 0px;
        font: 14px "微软雅黑";
      }
      a {
        text-decoration: none;
        display: block;
      }
      li {
        list-style: none;
      }
      img {
        display: block;
      }
      /*css reset 结束*/

      /*common css 开始*/
      .clearfix {
        *zoom: 1;
      }
      .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
      .commonTitle {
        color: #009ee0;
        font-size: 80px;
        line-height: 0.8;
        font-weight: bold;
        letter-spacing: -5px;
      }
      .commonText {
        color: white;
        line-height: 1.5;
        font-size: 15px;
      }
      /*common css 结束*/

      /*头部样式 开始*/
      #head {
        background: white !important;
        width: 100%;
      }
      #head .headMain {
        width: 1100px;
        height: 80px;
        margin: 0 auto;
        position: relative;
      }
      #head .headMain > .logo {
        float: left;
        margin-top: 30px;
      }
      #head .headMain > .nav {
        float: right;
        margin-top: 50px;
      }
      #head .headMain > .nav > .list > li {
        float: left;
        margin-left: 40px;
        position: relative;
      }
      #head .headMain > .nav > .list > li .up {
        color: #000000;
        position: absolute;
        width: 0;
        overflow: hidden;
        transition: 1s width;
      }
      #head .headMain > .nav > .list > li:hover .up {
        width: 100%;
      }

      /*头部样式 结束*/

      /*内容区样式 开始*/
      #content {
        background: gray;
        position: relative;
        overflow: hidden;
        width: 100%;
      }
      #content > .list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transition: 1s top;
      }
      #content > .list > li {
        position: relative;
        background-position: 50% 50% !important;
        overflow: hidden;
      }
      #content > .list > li > section {
        width: 1100px;
        height: 520px;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
      /*第三屏 start*/
      #content > .list > .works .works1 {
        margin: 50px 0px 100px 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 {
        margin-left: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 > .item {
        float: left;
        width: 220px;
        height: 133px;
        margin: 0 1px;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .works .works2 > .item:last-of-type {
        width: 332px;
      }

      #content > .list > .works .works2 > .item .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        padding: 10px;
        background: #000000;
        opacity: 0;
        color: white;
        transition: 1s opacity;
      }
      #content > .list > .works .works2 > .item .mask .icon {
        width: 32px;
        height: 34px;
        margin: 0 auto;
        margin-top: 10px;
        transition: 1s background-position;
      }
      #content > .list > .works .works2 > .item img {
        transition: 1s transform;
      }

      #content > .list > .works .works2 > .item .mask .icon:hover {
        background-position: 0 -35px;
      }
      #content > .list > .works .works2 > .item:hover .mask {
        opacity: 0.8;
      }
      #content > .list > .works .works2 > .item:hover img {
        transform: rotate(30deg) scale(1.5);
      }

      @keyframes works3Move {
        0% {
          transform: translateX(0px) rotateY(0deg);
        }
        49% {
          transform: translateX(-490px) rotateY(0deg);
        }
        50% {
          transform: translateX(-500px) rotateY(180deg);
        }
        100% {
          transform: translateX(0px) rotateY(180deg);
        }
      }
      /*第三屏 end*/

      /*第二屏 start*/
      #content > .list > .course .course1 {
        margin: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course2 {
        margin-left: 50px;
        width: 400px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course3 {
        width: 480px;
        position: absolute;
        z-index: 2;
        right: 50px;
        top: 70px;
      }

      #content > .list > .course .course3 .line {
        position: absolute;
        top: -7px;
        width: 9px;
        height: 410px;
      }

      #content > .list > .course .course3 .line:nth-of-type(1) {
        left: -5px;
      }
      #content > .list > .course .course3 .line:nth-of-type(2) {
        left: 115px;
      }
      #content > .list > .course .course3 .line:nth-of-type(3) {
        left: 235px;
      }
      #content > .list > .course .course3 .line:nth-of-type(4) {
        left: 355px;
      }
      #content > .list > .course .course3 .line:nth-of-type(5) {
        left: 475px;
      }

      #content > .list > .course .course3 .item {
        float: left;
        width: 120px;
        height: 132px;
        position: relative;
        perspective: 500px;
        transform-style: preserve-3d;
      }
      #content > .list > .course .course3 .item .face,
      #content > .list > .course .course3 .item .backFace {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 15px;
        transition: 1s transform;
      }

      #content > .list > .course .course3 .item .backFace {
        background-position: 50% 50% !important;
      }

      #content > .list > .course .course3 .item:hover .face {
        transform: rotateY(360deg);
      }
      #content > .list > .course .course3 .item:hover .backFace {
        transform: rotateY(180deg);
      }
      /*第二屏 end*/

      /*第一屏 start*/
      #content > .list > .home .home1 {
        width: 100%;
        height: 100%;
        perspective: 1000px;
        transform-style: preserve-3d;
      }
      #content > .list > .home .home1 > li {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        visibility: hidden;
      }
      #content > .list > .home .home1 > li:nth-child(1) {
        background: #dc6c5f;
      }
      #content > .list > .home .home1 > li:nth-child(2) {
        background: #95dc84;
      }
      #content > .list > .home .home1 > li:nth-child(3) {
        background: #64b9d2;
      }
      #content > .list > .home .home1 > li:nth-child(4) {
        background: #000000;
      }
      #content > .list > .home .home1 > li > div {
        color: white;
        text-align: center;
        margin-top: 200px;
      }
      #content > .list > .home .home1 > li.active {
        visibility: visible;
      }

      #content > .list > .home .home2 {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
      }
      #content > .list > .home .home2 > li {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.5);
        display: inline-block;
        box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
        cursor: pointer;
      }
      #content > .list > .home .home2 > li.active {
        background: white;
        cursor: default;
      }

      /*从左往右 leftHide  rightShow*/
      #content > .list > .home .home1 > li.leftHide {
        visibility: hidden;
        animation: 1s leftHide 1 linear;
      }
      #content > .list > .home .home1 > li.rightShow {
        visibility: visible;
        animation: 1s rightShow 1 linear;
      }
      @keyframes leftHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }
      @keyframes rightShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
        }
      }
      /*从右往左 leftShow  rightHide*/
      #content > .list > .home .home1 > li.leftShow {
        visibility: visible;
        animation: 1s leftShow 1 linear;
      }
      #content > .list > .home .home1 > li.rightHide {
        visibility: hidden;
        animation: 1s rightHide 1 linear;
      }
      @keyframes leftShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
        }
      }
      @keyframes rightHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }

      /*第一屏 end*/
      /*第四屏 strat*/
      #content > .list > .about .about1 {
        margin: 50px 0 100px 50px;
      }
      #content > .list > .about .about2 {
        margin-left: 50px;
        width: 400px;
      }
      #content > .list > .about .about3 > .item {
        width: 260px;
        height: 200px;
        border: 5px solid rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        position: absolute;
        z-index: 2;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item:nth-child(1) {
        left: 750px;
        top: 50px;
      }
      #content > .list > .about .about3 > .item:nth-child(2) {
        left: 600px;
        top: 290px;
      }

      #content > .list > .about .about3 > .item > span,
      #content > .list > .about .about3 > .item > ul {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      #content > .list > .about .about3 > .item:hover span {
        transform: scale(1);
      }

      #content > .list > .about .about3 > .item > ul > li {
        float: left;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item > ul > li > img {
        position: absolute;
        transition: 1s top, 1s left;
      }

      /*第四屏 end*/
      /*第五屏 strat*/
      #content > .list > .team .team1 {
        width: 400px;
        margin: 50px;
        float: left;
      }
      #content > .list > .team .team2 {
        width: 400px;
        margin: 50px;
        float: right;
      }
      #content > .list > .team .team3 {
        width: 944px;
        height: 448px;
        position: absolute;
        left: 50%;
        margin-left: -472px;
        top: 250px;
      }
      #content > .list > .team .team3 ul {
        position: relative;
        height: 100%;
      }
      #content > .list > .team .team3 ul > li:nth-child(1) {
        background-position: 0, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(2) {
        background-position: -118px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(3) {
        background-position: -236px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(4) {
        background-position: -354px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(5) {
        background-position: -472px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(6) {
        background-position: -590px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(7) {
        background-position: -708px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(8) {
        background-position: -826px, 0;
      }
      #content > .list > .team canvas {
        position: absolute;
        top: 0px;
      }

      /*第五屏 end*/

      /*小圆点*/
      #content > .dot {
        position: fixed;
        right: 10px;
        top: 50%;
      }
      #content > .dot > li {
        width: 10px;
        height: 10px;
        border: 5px solid pink;
        margin-top: 10px;
        border-radius: 50%;
      }
      #content > .dot > li.active {
        background: white;
      }

      /*内容区样式 结束*/

      /*出入场*/
      #content > .list > .home .home1,
      #content > .list > .home .home2 {
        transition: 1s transform, 1s opacity;
      }
      #content > .list > .about .about3 > .item,
      #content > .list > .team .team1,
      #content > .list > .team .team2 {
        transition: 1s transform;
      }

      /*音频*/

      /*开机动画*/
      #mask {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 100;
      }
      #mask .up {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
      }
      #mask .down {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
        position: absolute;
        bottom: 0;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      #wrap {
        height: 100%;
      }
      html,
      body,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      li {
        margin: 0px;
        padding: 0px;
        font: 14px "微软雅黑";
      }
      a {
        text-decoration: none;
        display: block;
      }
      li {
        list-style: none;
      }
      img {
        display: block;
      }
      /*css reset 结束*/

      /*common css 开始*/
      .clearfix {
        *zoom: 1;
      }
      .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
      .commonTitle {
        color: #009ee0;
        font-size: 80px;
        line-height: 0.8;
        font-weight: bold;
        letter-spacing: -5px;
      }
      .commonText {
        color: white;
        line-height: 1.5;
        font-size: 15px;
      }
      /*common css 结束*/

      /*头部样式 开始*/
      #head {
        background: white !important;
        width: 100%;
      }
      #head .headMain {
        width: 1100px;
        height: 80px;
        margin: 0 auto;
        position: relative;
      }
      #head .headMain > .logo {
        float: left;
        margin-top: 30px;
      }
      #head .headMain > .nav {
        float: right;
        margin-top: 50px;
      }
      #head .headMain > .nav > .list > li {
        float: left;
        margin-left: 40px;
        position: relative;
      }
      #head .headMain > .nav > .list > li .up {
        color: #000000;
        position: absolute;
        width: 0;
        overflow: hidden;
        transition: 1s width;
      }
      #head .headMain > .nav > .list > li:hover .up {
        width: 100%;
      }

      /*头部样式 结束*/

      /*内容区样式 开始*/
      #content {
        background: gray;
        position: relative;
        overflow: hidden;
        width: 100%;
      }
      #content > .list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transition: 1s top;
      }
      #content > .list > li {
        position: relative;
        background-position: 50% 50% !important;
        overflow: hidden;
      }
      #content > .list > li > section {
        width: 1100px;
        height: 520px;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
      /*第三屏 start*/
      #content > .list > .works .works1 {
        margin: 50px 0px 100px 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 {
        margin-left: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 > .item {
        float: left;
        width: 220px;
        height: 133px;
        margin: 0 1px;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .works .works2 > .item:last-of-type {
        width: 332px;
      }

      #content > .list > .works .works2 > .item .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        padding: 10px;
        background: #000000;
        opacity: 0;
        color: white;
        transition: 1s opacity;
      }
      #content > .list > .works .works2 > .item .mask .icon {
        width: 32px;
        height: 34px;
        margin: 0 auto;
        margin-top: 10px;
        transition: 1s background-position;
      }
      #content > .list > .works .works2 > .item img {
        transition: 1s transform;
      }

      #content > .list > .works .works2 > .item .mask .icon:hover {
        background-position: 0 -35px;
      }
      #content > .list > .works .works2 > .item:hover .mask {
        opacity: 0.8;
      }
      #content > .list > .works .works2 > .item:hover img {
        transform: rotate(30deg) scale(1.5);
      }

      @keyframes works3Move {
        0% {
          transform: translateX(0px) rotateY(0deg);
        }
        49% {
          transform: translateX(-490px) rotateY(0deg);
        }
        50% {
          transform: translateX(-500px) rotateY(180deg);
        }
        100% {
          transform: translateX(0px) rotateY(180deg);
        }
      }
      /*第三屏 end*/

      /*第二屏 start*/
      #content > .list > .course .course1 {
        margin: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course2 {
        margin-left: 50px;
        width: 400px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course3 {
        width: 480px;
        position: absolute;
        z-index: 2;
        right: 50px;
        top: 70px;
      }

      #content > .list > .course .course3 .line {
        position: absolute;
        top: -7px;
        width: 9px;
        height: 410px;
      }

      #content > .list > .course .course3 .line:nth-of-type(1) {
        left: -5px;
      }
      #content > .list > .course .course3 .line:nth-of-type(2) {
        left: 115px;
      }
      #content > .list > .course .course3 .line:nth-of-type(3) {
        left: 235px;
      }
      #content > .list > .course .course3 .line:nth-of-type(4) {
        left: 355px;
      }
      #content > .list > .course .course3 .line:nth-of-type(5) {
        left: 475px;
      }

      #content > .list > .course .course3 .item {
        float: left;
        width: 120px;
        height: 132px;
        position: relative;
        perspective: 500px;
        transform-style: preserve-3d;
      }
      #content > .list > .course .course3 .item .face,
      #content > .list > .course .course3 .item .backFace {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 15px;
        transition: 1s transform;
      }

      #content > .list > .course .course3 .item .backFace {
        background-position: 50% 50% !important;
      }

      #content > .list > .course .course3 .item:hover .face {
        transform: rotateY(360deg);
      }
      #content > .list > .course .course3 .item:hover .backFace {
        transform: rotateY(180deg);
      }
      /*第二屏 end*/

      /*第一屏 start*/
      #content > .list > .home .home1 {
        width: 100%;
        height: 100%;
        perspective: 1000px;
        transform-style: preserve-3d;
      }
      #content > .list > .home .home1 > li {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        visibility: hidden;
      }
      #content > .list > .home .home1 > li:nth-child(1) {
        background: #dc6c5f;
      }
      #content > .list > .home .home1 > li:nth-child(2) {
        background: #95dc84;
      }
      #content > .list > .home .home1 > li:nth-child(3) {
        background: #64b9d2;
      }
      #content > .list > .home .home1 > li:nth-child(4) {
        background: #000000;
      }
      #content > .list > .home .home1 > li > div {
        color: white;
        text-align: center;
        margin-top: 200px;
      }
      #content > .list > .home .home1 > li.active {
        visibility: visible;
      }

      #content > .list > .home .home2 {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
      }
      #content > .list > .home .home2 > li {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.5);
        display: inline-block;
        box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
        cursor: pointer;
      }
      #content > .list > .home .home2 > li.active {
        background: white;
        cursor: default;
      }

      /*从左往右 leftHide  rightShow*/
      #content > .list > .home .home1 > li.leftHide {
        visibility: hidden;
        animation: 1s leftHide 1 linear;
      }
      #content > .list > .home .home1 > li.rightShow {
        visibility: visible;
        animation: 1s rightShow 1 linear;
      }
      @keyframes leftHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }
      @keyframes rightShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
        }
      }
      /*从右往左 leftShow  rightHide*/
      #content > .list > .home .home1 > li.leftShow {
        visibility: visible;
        animation: 1s leftShow 1 linear;
      }
      #content > .list > .home .home1 > li.rightHide {
        visibility: hidden;
        animation: 1s rightHide 1 linear;
      }
      @keyframes leftShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
        }
      }
      @keyframes rightHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }

      /*第一屏 end*/
      /*第四屏 strat*/
      #content > .list > .about .about1 {
        margin: 50px 0 100px 50px;
      }
      #content > .list > .about .about2 {
        margin-left: 50px;
        width: 400px;
      }
      #content > .list > .about .about3 > .item {
        width: 260px;
        height: 200px;
        border: 5px solid rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        position: absolute;
        z-index: 2;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item:nth-child(1) {
        left: 750px;
        top: 50px;
      }
      #content > .list > .about .about3 > .item:nth-child(2) {
        left: 600px;
        top: 290px;
      }

      #content > .list > .about .about3 > .item > span,
      #content > .list > .about .about3 > .item > ul {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      #content > .list > .about .about3 > .item:hover span {
        transform: scale(1);
      }

      #content > .list > .about .about3 > .item > ul > li {
        float: left;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item > ul > li > img {
        position: absolute;
        transition: 1s top, 1s left;
      }

      /*第四屏 end*/
      /*第五屏 strat*/
      #content > .list > .team .team1 {
        width: 400px;
        margin: 50px;
        float: left;
      }
      #content > .list > .team .team2 {
        width: 400px;
        margin: 50px;
        float: right;
      }
      #content > .list > .team .team3 {
        width: 944px;
        height: 448px;
        position: absolute;
        left: 50%;
        margin-left: -472px;
        top: 250px;
      }
      #content > .list > .team .team3 ul {
        position: relative;
        height: 100%;
      }
      #content > .list > .team .team3 ul > li:nth-child(1) {
        background-position: 0, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(2) {
        background-position: -118px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(3) {
        background-position: -236px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(4) {
        background-position: -354px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(5) {
        background-position: -472px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(6) {
        background-position: -590px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(7) {
        background-position: -708px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(8) {
        background-position: -826px, 0;
      }
      #content > .list > .team canvas {
        position: absolute;
        top: 0px;
      }

      /*第五屏 end*/

      /*小圆点*/
      #content > .dot {
        position: fixed;
        right: 10px;
        top: 50%;
      }
      #content > .dot > li {
        width: 10px;
        height: 10px;
        border: 5px solid pink;
        margin-top: 10px;
        border-radius: 50%;
      }
      #content > .dot > li.active {
        background: white;
      }

      /*内容区样式 结束*/

      /*出入场*/
      #content > .list > .home .home1,
      #content > .list > .home .home2 {
        transition: 1s transform, 1s opacity;
      }
      #content > .list > .about .about3 > .item,
      #content > .list > .team .team1,
      #content > .list > .team .team2 {
        transition: 1s transform;
      }

      /*音频*/

      /*开机动画*/
      #mask {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 100;
      }
      #mask .up {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
      }
      #mask .down {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
        position: absolute;
        bottom: 0;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      #wrap {
        height: 100%;
      }
      html,
      body,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      li {
        margin: 0px;
        padding: 0px;
        font: 14px "微软雅黑";
      }
      a {
        text-decoration: none;
        display: block;
      }
      li {
        list-style: none;
      }
      img {
        display: block;
      }
      /*css reset 结束*/

      /*common css 开始*/
      .clearfix {
        *zoom: 1;
      }
      .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
      .commonTitle {
        color: #009ee0;
        font-size: 80px;
        line-height: 0.8;
        font-weight: bold;
        letter-spacing: -5px;
      }
      .commonText {
        color: white;
        line-height: 1.5;
        font-size: 15px;
      }
      /*common css 结束*/

      /*头部样式 开始*/
      #head {
        background: white !important;
        width: 100%;
      }
      #head .headMain {
        width: 1100px;
        height: 80px;
        margin: 0 auto;
        position: relative;
      }
      #head .headMain > .logo {
        float: left;
        margin-top: 30px;
      }
      #head .headMain > .nav {
        float: right;
        margin-top: 50px;
      }
      #head .headMain > .nav > .list > li {
        float: left;
        margin-left: 40px;
        position: relative;
      }
      #head .headMain > .nav > .list > li .up {
        color: #000000;
        position: absolute;
        width: 0;
        overflow: hidden;
        transition: 1s width;
      }
      #head .headMain > .nav > .list > li:hover .up {
        width: 100%;
      }

      /*头部样式 结束*/

      /*内容区样式 开始*/
      #content {
        background: gray;
        position: relative;
        overflow: hidden;
        width: 100%;
      }
      #content > .list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transition: 1s top;
      }
      #content > .list > li {
        position: relative;
        background-position: 50% 50% !important;
        overflow: hidden;
      }
      #content > .list > li > section {
        width: 1100px;
        height: 520px;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
      /*第三屏 start*/
      #content > .list > .works .works1 {
        margin: 50px 0px 100px 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 {
        margin-left: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 > .item {
        float: left;
        width: 220px;
        height: 133px;
        margin: 0 1px;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .works .works2 > .item:last-of-type {
        width: 332px;
      }

      #content > .list > .works .works2 > .item .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        padding: 10px;
        background: #000000;
        opacity: 0;
        color: white;
        transition: 1s opacity;
      }
      #content > .list > .works .works2 > .item .mask .icon {
        width: 32px;
        height: 34px;
        margin: 0 auto;
        margin-top: 10px;
        transition: 1s background-position;
      }
      #content > .list > .works .works2 > .item img {
        transition: 1s transform;
      }

      #content > .list > .works .works2 > .item .mask .icon:hover {
        background-position: 0 -35px;
      }
      #content > .list > .works .works2 > .item:hover .mask {
        opacity: 0.8;
      }
      #content > .list > .works .works2 > .item:hover img {
        transform: rotate(30deg) scale(1.5);
      }

      @keyframes works3Move {
        0% {
          transform: translateX(0px) rotateY(0deg);
        }
        49% {
          transform: translateX(-490px) rotateY(0deg);
        }
        50% {
          transform: translateX(-500px) rotateY(180deg);
        }
        100% {
          transform: translateX(0px) rotateY(180deg);
        }
      }
      /*第三屏 end*/

      /*第二屏 start*/
      #content > .list > .course .course1 {
        margin: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course2 {
        margin-left: 50px;
        width: 400px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course3 {
        width: 480px;
        position: absolute;
        z-index: 2;
        right: 50px;
        top: 70px;
      }

      #content > .list > .course .course3 .line {
        position: absolute;
        top: -7px;
        width: 9px;
        height: 410px;
      }

      #content > .list > .course .course3 .line:nth-of-type(1) {
        left: -5px;
      }
      #content > .list > .course .course3 .line:nth-of-type(2) {
        left: 115px;
      }
      #content > .list > .course .course3 .line:nth-of-type(3) {
        left: 235px;
      }
      #content > .list > .course .course3 .line:nth-of-type(4) {
        left: 355px;
      }
      #content > .list > .course .course3 .line:nth-of-type(5) {
        left: 475px;
      }

      #content > .list > .course .course3 .item {
        float: left;
        width: 120px;
        height: 132px;
        position: relative;
        perspective: 500px;
        transform-style: preserve-3d;
      }
      #content > .list > .course .course3 .item .face,
      #content > .list > .course .course3 .item .backFace {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 15px;
        transition: 1s transform;
      }

      #content > .list > .course .course3 .item .backFace {
        background-position: 50% 50% !important;
      }

      #content > .list > .course .course3 .item:hover .face {
        transform: rotateY(360deg);
      }
      #content > .list > .course .course3 .item:hover .backFace {
        transform: rotateY(180deg);
      }
      /*第二屏 end*/

      /*第一屏 start*/
      #content > .list > .home .home1 {
        width: 100%;
        height: 100%;
        perspective: 1000px;
        transform-style: preserve-3d;
      }
      #content > .list > .home .home1 > li {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        visibility: hidden;
      }
      #content > .list > .home .home1 > li:nth-child(1) {
        background: #dc6c5f;
      }
      #content > .list > .home .home1 > li:nth-child(2) {
        background: #95dc84;
      }
      #content > .list > .home .home1 > li:nth-child(3) {
        background: #64b9d2;
      }
      #content > .list > .home .home1 > li:nth-child(4) {
        background: #000000;
      }
      #content > .list > .home .home1 > li > div {
        color: white;
        text-align: center;
        margin-top: 200px;
      }
      #content > .list > .home .home1 > li.active {
        visibility: visible;
      }

      #content > .list > .home .home2 {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
      }
      #content > .list > .home .home2 > li {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.5);
        display: inline-block;
        box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
        cursor: pointer;
      }
      #content > .list > .home .home2 > li.active {
        background: white;
        cursor: default;
      }

      /*从左往右 leftHide  rightShow*/
      #content > .list > .home .home1 > li.leftHide {
        visibility: hidden;
        animation: 1s leftHide 1 linear;
      }
      #content > .list > .home .home1 > li.rightShow {
        visibility: visible;
        animation: 1s rightShow 1 linear;
      }
      @keyframes leftHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }
      @keyframes rightShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
        }
      }
      /*从右往左 leftShow  rightHide*/
      #content > .list > .home .home1 > li.leftShow {
        visibility: visible;
        animation: 1s leftShow 1 linear;
      }
      #content > .list > .home .home1 > li.rightHide {
        visibility: hidden;
        animation: 1s rightHide 1 linear;
      }
      @keyframes leftShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
        }
      }
      @keyframes rightHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }

      /*第一屏 end*/
      /*第四屏 strat*/
      #content > .list > .about .about1 {
        margin: 50px 0 100px 50px;
      }
      #content > .list > .about .about2 {
        margin-left: 50px;
        width: 400px;
      }
      #content > .list > .about .about3 > .item {
        width: 260px;
        height: 200px;
        border: 5px solid rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        position: absolute;
        z-index: 2;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item:nth-child(1) {
        left: 750px;
        top: 50px;
      }
      #content > .list > .about .about3 > .item:nth-child(2) {
        left: 600px;
        top: 290px;
      }

      #content > .list > .about .about3 > .item > span,
      #content > .list > .about .about3 > .item > ul {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      #content > .list > .about .about3 > .item:hover span {
        transform: scale(1);
      }

      #content > .list > .about .about3 > .item > ul > li {
        float: left;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item > ul > li > img {
        position: absolute;
        transition: 1s top, 1s left;
      }

      /*第四屏 end*/
      /*第五屏 strat*/
      #content > .list > .team .team1 {
        width: 400px;
        margin: 50px;
        float: left;
      }
      #content > .list > .team .team2 {
        width: 400px;
        margin: 50px;
        float: right;
      }
      #content > .list > .team .team3 {
        width: 944px;
        height: 448px;
        position: absolute;
        left: 50%;
        margin-left: -472px;
        top: 250px;
      }
      #content > .list > .team .team3 ul {
        position: relative;
        height: 100%;
      }
      #content > .list > .team .team3 ul > li:nth-child(1) {
        background-position: 0, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(2) {
        background-position: -118px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(3) {
        background-position: -236px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(4) {
        background-position: -354px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(5) {
        background-position: -472px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(6) {
        background-position: -590px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(7) {
        background-position: -708px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(8) {
        background-position: -826px, 0;
      }
      #content > .list > .team canvas {
        position: absolute;
        top: 0px;
      }

      /*第五屏 end*/

      /*小圆点*/
      #content > .dot {
        position: fixed;
        right: 10px;
        top: 50%;
      }
      #content > .dot > li {
        width: 10px;
        height: 10px;
        border: 5px solid pink;
        margin-top: 10px;
        border-radius: 50%;
      }
      #content > .dot > li.active {
        background: white;
      }

      /*内容区样式 结束*/

      /*出入场*/
      #content > .list > .home .home1,
      #content > .list > .home .home2 {
        transition: 1s transform, 1s opacity;
      }
      #content > .list > .about .about3 > .item,
      #content > .list > .team .team1,
      #content > .list > .team .team2 {
        transition: 1s transform;
      }

      /*音频*/

      /*开机动画*/
      #mask {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 100;
      }
      #mask .up {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
      }
      #mask .down {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
        position: absolute;
        bottom: 0;
      }

      html,
      body {
        margin: 0;
        padding: 0;
      }
      #wrap {
        height: 100%;
      }
      html,
      body,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      li {
        margin: 0px;
        padding: 0px;
        font: 14px "微软雅黑";
      }
      a {
        text-decoration: none;
        display: block;
      }
      li {
        list-style: none;
      }
      img {
        display: block;
      }
      /*css reset 结束*/

      /*common css 开始*/
      .clearfix {
        *zoom: 1;
      }
      .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
      .commonTitle {
        color: #009ee0;
        font-size: 80px;
        line-height: 0.8;
        font-weight: bold;
        letter-spacing: -5px;
      }
      .commonText {
        color: white;
        line-height: 1.5;
        font-size: 15px;
      }
      /*common css 结束*/

      /*头部样式 开始*/
      #head {
        background: white !important;
        width: 100%;
      }
      #head .headMain {
        width: 1100px;
        height: 80px;
        margin: 0 auto;
        position: relative;
      }
      #head .headMain > .logo {
        float: left;
        margin-top: 30px;
      }
      #head .headMain > .nav {
        float: right;
        margin-top: 50px;
      }
      #head .headMain > .nav > .list > li {
        float: left;
        margin-left: 40px;
        position: relative;
      }
      #head .headMain > .nav > .list > li .up {
        color: #000000;
        position: absolute;
        width: 0;
        overflow: hidden;
        transition: 1s width;
      }
      #head .headMain > .nav > .list > li:hover .up {
        width: 100%;
      }

      /*头部样式 结束*/

      /*内容区样式 开始*/
      #content {
        background: gray;
        position: relative;
        overflow: hidden;
        width: 100%;
      }
      #content > .list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transition: 1s top;
      }
      #content > .list > li {
        position: relative;
        background-position: 50% 50% !important;
        overflow: hidden;
      }
      #content > .list > li > section {
        width: 1100px;
        height: 520px;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
      /*第三屏 start*/
      #content > .list > .works .works1 {
        margin: 50px 0px 100px 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 {
        margin-left: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 > .item {
        float: left;
        width: 220px;
        height: 133px;
        margin: 0 1px;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .works .works2 > .item:last-of-type {
        width: 332px;
      }

      #content > .list > .works .works2 > .item .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        padding: 10px;
        background: #000000;
        opacity: 0;
        color: white;
        transition: 1s opacity;
      }
      #content > .list > .works .works2 > .item .mask .icon {
        width: 32px;
        height: 34px;
        margin: 0 auto;
        margin-top: 10px;
        transition: 1s background-position;
      }
      #content > .list > .works .works2 > .item img {
        transition: 1s transform;
      }

      #content > .list > .works .works2 > .item .mask .icon:hover {
        background-position: 0 -35px;
      }
      #content > .list > .works .works2 > .item:hover .mask {
        opacity: 0.8;
      }
      #content > .list > .works .works2 > .item:hover img {
        transform: rotate(30deg) scale(1.5);
      }

      @keyframes works3Move {
        0% {
          transform: translateX(0px) rotateY(0deg);
        }
        49% {
          transform: translateX(-490px) rotateY(0deg);
        }
        50% {
          transform: translateX(-500px) rotateY(180deg);
        }
        100% {
          transform: translateX(0px) rotateY(180deg);
        }
      }
      /*第三屏 end*/

      /*第二屏 start*/
      #content > .list > .course .course1 {
        margin: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course2 {
        margin-left: 50px;
        width: 400px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course3 {
        width: 480px;
        position: absolute;
        z-index: 2;
        right: 50px;
        top: 70px;
      }

      #content > .list > .course .course3 .line {
        position: absolute;
        top: -7px;
        width: 9px;
        height: 410px;
      }

      #content > .list > .course .course3 .line:nth-of-type(1) {
        left: -5px;
      }
      #content > .list > .course .course3 .line:nth-of-type(2) {
        left: 115px;
      }
      #content > .list > .course .course3 .line:nth-of-type(3) {
        left: 235px;
      }
      #content > .list > .course .course3 .line:nth-of-type(4) {
        left: 355px;
      }
      #content > .list > .course .course3 .line:nth-of-type(5) {
        left: 475px;
      }

      #content > .list > .course .course3 .item {
        float: left;
        width: 120px;
        height: 132px;
        position: relative;
        perspective: 500px;
        transform-style: preserve-3d;
      }
      #content > .list > .course .course3 .item .face,
      #content > .list > .course .course3 .item .backFace {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 15px;
        transition: 1s transform;
      }

      #content > .list > .course .course3 .item .backFace {
        background-position: 50% 50% !important;
      }

      #content > .list > .course .course3 .item:hover .face {
        transform: rotateY(360deg);
      }
      #content > .list > .course .course3 .item:hover .backFace {
        transform: rotateY(180deg);
      }
      /*第二屏 end*/

      /*第一屏 start*/
      #content > .list > .home .home1 {
        width: 100%;
        height: 100%;
        perspective: 1000px;
        transform-style: preserve-3d;
      }
      #content > .list > .home .home1 > li {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        visibility: hidden;
      }
      #content > .list > .home .home1 > li:nth-child(1) {
        background: #dc6c5f;
      }
      #content > .list > .home .home1 > li:nth-child(2) {
        background: #95dc84;
      }
      #content > .list > .home .home1 > li:nth-child(3) {
        background: #64b9d2;
      }
      #content > .list > .home .home1 > li:nth-child(4) {
        background: #000000;
      }
      #content > .list > .home .home1 > li > div {
        color: white;
        text-align: center;
        margin-top: 200px;
      }
      #content > .list > .home .home1 > li.active {
        visibility: visible;
      }

      #content > .list > .home .home2 {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
      }
      #content > .list > .home .home2 > li {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.5);
        display: inline-block;
        box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
        cursor: pointer;
      }
      #content > .list > .home .home2 > li.active {
        background: white;
        cursor: default;
      }

      /*从左往右 leftHide  rightShow*/
      #content > .list > .home .home1 > li.leftHide {
        visibility: hidden;
        animation: 1s leftHide 1 linear;
      }
      #content > .list > .home .home1 > li.rightShow {
        visibility: visible;
        animation: 1s rightShow 1 linear;
      }
      @keyframes leftHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }
      @keyframes rightShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
        }
      }
      /*从右往左 leftShow  rightHide*/
      #content > .list > .home .home1 > li.leftShow {
        visibility: visible;
        animation: 1s leftShow 1 linear;
      }
      #content > .list > .home .home1 > li.rightHide {
        visibility: hidden;
        animation: 1s rightHide 1 linear;
      }
      @keyframes leftShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
        }
      }
      @keyframes rightHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }

      /*第一屏 end*/
      /*第四屏 strat*/
      #content > .list > .about .about1 {
        margin: 50px 0 100px 50px;
      }
      #content > .list > .about .about2 {
        margin-left: 50px;
        width: 400px;
      }
      #content > .list > .about .about3 > .item {
        width: 260px;
        height: 200px;
        border: 5px solid rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        position: absolute;
        z-index: 2;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item:nth-child(1) {
        left: 750px;
        top: 50px;
      }
      #content > .list > .about .about3 > .item:nth-child(2) {
        left: 600px;
        top: 290px;
      }

      #content > .list > .about .about3 > .item > span,
      #content > .list > .about .about3 > .item > ul {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      #content > .list > .about .about3 > .item:hover span {
        transform: scale(1);
      }

      #content > .list > .about .about3 > .item > ul > li {
        float: left;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item > ul > li > img {
        position: absolute;
        transition: 1s top, 1s left;
      }

      /*第四屏 end*/
      /*第五屏 strat*/
      #content > .list > .team .team1 {
        width: 400px;
        margin: 50px;
        float: left;
      }
      #content > .list > .team .team2 {
        width: 400px;
        margin: 50px;
        float: right;
      }
      #content > .list > .team .team3 {
        width: 944px;
        height: 448px;
        position: absolute;
        left: 50%;
        margin-left: -472px;
        top: 250px;
      }
      #content > .list > .team .team3 ul {
        position: relative;
        height: 100%;
      }
      #content > .list > .team .team3 ul > li:nth-child(1) {
        background-position: 0, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(2) {
        background-position: -118px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(3) {
        background-position: -236px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(4) {
        background-position: -354px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(5) {
        background-position: -472px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(6) {
        background-position: -590px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(7) {
        background-position: -708px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(8) {
        background-position: -826px, 0;
      }
      #content > .list > .team canvas {
        position: absolute;
        top: 0px;
      }

      /*第五屏 end*/

      /*小圆点*/
      #content > .dot {
        position: fixed;
        right: 10px;
        top: 50%;
      }
      #content > .dot > li {
        width: 10px;
        height: 10px;
        border: 5px solid pink;
        margin-top: 10px;
        border-radius: 50%;
      }
      #content > .dot > li.active {
        background: white;
      }

      /*内容区样式 结束*/

      /*出入场*/
      #content > .list > .home .home1,
      #content > .list > .home .home2 {
        transition: 1s transform, 1s opacity;
      }
      #content > .list > .about .about3 > .item,
      #content > .list > .team .team1,
      #content > .list > .team .team2 {
        transition: 1s transform;
      }

      /*音频*/

      /*开机动画*/
      #mask {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 100;
      }
      #mask .up {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
      }
      #mask .down {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
        position: absolute;
        bottom: 0;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      #wrap {
        height: 100%;
      }
      html,
      body,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      li {
        margin: 0px;
        padding: 0px;
        font: 14px "微软雅黑";
      }
      a {
        text-decoration: none;
        display: block;
      }
      li {
        list-style: none;
      }
      img {
        display: block;
      }
      /*css reset 结束*/

      /*common css 开始*/
      .clearfix {
        *zoom: 1;
      }
      .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
      .commonTitle {
        color: #009ee0;
        font-size: 80px;
        line-height: 0.8;
        font-weight: bold;
        letter-spacing: -5px;
      }
      .commonText {
        color: white;
        line-height: 1.5;
        font-size: 15px;
      }
      /*common css 结束*/

      /*头部样式 开始*/
      #head {
        background: white !important;
        width: 100%;
      }
      #head .headMain {
        width: 1100px;
        height: 80px;
        margin: 0 auto;
        position: relative;
      }
      #head .headMain > .logo {
        float: left;
        margin-top: 30px;
      }
      #head .headMain > .nav {
        float: right;
        margin-top: 50px;
      }
      #head .headMain > .nav > .list > li {
        float: left;
        margin-left: 40px;
        position: relative;
      }
      #head .headMain > .nav > .list > li .up {
        color: #000000;
        position: absolute;
        width: 0;
        overflow: hidden;
        transition: 1s width;
      }
      #head .headMain > .nav > .list > li:hover .up {
        width: 100%;
      }

      /*头部样式 结束*/

      /*内容区样式 开始*/
      #content {
        background: gray;
        position: relative;
        overflow: hidden;
        width: 100%;
      }
      #content > .list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transition: 1s top;
      }
      #content > .list > li {
        position: relative;
        background-position: 50% 50% !important;
        overflow: hidden;
      }
      #content > .list > li > section {
        width: 1100px;
        height: 520px;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
      /*第三屏 start*/
      #content > .list > .works .works1 {
        margin: 50px 0px 100px 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 {
        margin-left: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 > .item {
        float: left;
        width: 220px;
        height: 133px;
        margin: 0 1px;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .works .works2 > .item:last-of-type {
        width: 332px;
      }

      #content > .list > .works .works2 > .item .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        padding: 10px;
        background: #000000;
        opacity: 0;
        color: white;
        transition: 1s opacity;
      }
      #content > .list > .works .works2 > .item .mask .icon {
        width: 32px;
        height: 34px;
        margin: 0 auto;
        margin-top: 10px;
        transition: 1s background-position;
      }
      #content > .list > .works .works2 > .item img {
        transition: 1s transform;
      }

      #content > .list > .works .works2 > .item .mask .icon:hover {
        background-position: 0 -35px;
      }
      #content > .list > .works .works2 > .item:hover .mask {
        opacity: 0.8;
      }
      #content > .list > .works .works2 > .item:hover img {
        transform: rotate(30deg) scale(1.5);
      }

      @keyframes works3Move {
        0% {
          transform: translateX(0px) rotateY(0deg);
        }
        49% {
          transform: translateX(-490px) rotateY(0deg);
        }
        50% {
          transform: translateX(-500px) rotateY(180deg);
        }
        100% {
          transform: translateX(0px) rotateY(180deg);
        }
      }
      /*第三屏 end*/

      /*第二屏 start*/
      #content > .list > .course .course1 {
        margin: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course2 {
        margin-left: 50px;
        width: 400px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course3 {
        width: 480px;
        position: absolute;
        z-index: 2;
        right: 50px;
        top: 70px;
      }

      #content > .list > .course .course3 .line {
        position: absolute;
        top: -7px;
        width: 9px;
        height: 410px;
      }

      #content > .list > .course .course3 .line:nth-of-type(1) {
        left: -5px;
      }
      #content > .list > .course .course3 .line:nth-of-type(2) {
        left: 115px;
      }
      #content > .list > .course .course3 .line:nth-of-type(3) {
        left: 235px;
      }
      #content > .list > .course .course3 .line:nth-of-type(4) {
        left: 355px;
      }
      #content > .list > .course .course3 .line:nth-of-type(5) {
        left: 475px;
      }

      #content > .list > .course .course3 .item {
        float: left;
        width: 120px;
        height: 132px;
        position: relative;
        perspective: 500px;
        transform-style: preserve-3d;
      }
      #content > .list > .course .course3 .item .face,
      #content > .list > .course .course3 .item .backFace {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 15px;
        transition: 1s transform;
      }

      #content > .list > .course .course3 .item .backFace {
        background-position: 50% 50% !important;
      }

      #content > .list > .course .course3 .item:hover .face {
        transform: rotateY(360deg);
      }
      #content > .list > .course .course3 .item:hover .backFace {
        transform: rotateY(180deg);
      }
      /*第二屏 end*/

      /*第一屏 start*/
      #content > .list > .home .home1 {
        width: 100%;
        height: 100%;
        perspective: 1000px;
        transform-style: preserve-3d;
      }
      #content > .list > .home .home1 > li {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        visibility: hidden;
      }
      #content > .list > .home .home1 > li:nth-child(1) {
        background: #dc6c5f;
      }
      #content > .list > .home .home1 > li:nth-child(2) {
        background: #95dc84;
      }
      #content > .list > .home .home1 > li:nth-child(3) {
        background: #64b9d2;
      }
      #content > .list > .home .home1 > li:nth-child(4) {
        background: #000000;
      }
      #content > .list > .home .home1 > li > div {
        color: white;
        text-align: center;
        margin-top: 200px;
      }
      #content > .list > .home .home1 > li.active {
        visibility: visible;
      }

      #content > .list > .home .home2 {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
      }
      #content > .list > .home .home2 > li {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.5);
        display: inline-block;
        box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
        cursor: pointer;
      }
      #content > .list > .home .home2 > li.active {
        background: white;
        cursor: default;
      }

      /*从左往右 leftHide  rightShow*/
      #content > .list > .home .home1 > li.leftHide {
        visibility: hidden;
        animation: 1s leftHide 1 linear;
      }
      #content > .list > .home .home1 > li.rightShow {
        visibility: visible;
        animation: 1s rightShow 1 linear;
      }
      @keyframes leftHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }
      @keyframes rightShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
        }
      }
      /*从右往左 leftShow  rightHide*/
      #content > .list > .home .home1 > li.leftShow {
        visibility: visible;
        animation: 1s leftShow 1 linear;
      }
      #content > .list > .home .home1 > li.rightHide {
        visibility: hidden;
        animation: 1s rightHide 1 linear;
      }
      @keyframes leftShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
        }
      }
      @keyframes rightHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }

      /*第一屏 end*/
      /*第四屏 strat*/
      #content > .list > .about .about1 {
        margin: 50px 0 100px 50px;
      }
      #content > .list > .about .about2 {
        margin-left: 50px;
        width: 400px;
      }
      #content > .list > .about .about3 > .item {
        width: 260px;
        height: 200px;
        border: 5px solid rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        position: absolute;
        z-index: 2;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item:nth-child(1) {
        left: 750px;
        top: 50px;
      }
      #content > .list > .about .about3 > .item:nth-child(2) {
        left: 600px;
        top: 290px;
      }

      #content > .list > .about .about3 > .item > span,
      #content > .list > .about .about3 > .item > ul {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      #content > .list > .about .about3 > .item:hover span {
        transform: scale(1);
      }

      #content > .list > .about .about3 > .item > ul > li {
        float: left;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item > ul > li > img {
        position: absolute;
        transition: 1s top, 1s left;
      }

      /*第四屏 end*/
      /*第五屏 strat*/
      #content > .list > .team .team1 {
        width: 400px;
        margin: 50px;
        float: left;
      }
      #content > .list > .team .team2 {
        width: 400px;
        margin: 50px;
        float: right;
      }
      #content > .list > .team .team3 {
        width: 944px;
        height: 448px;
        position: absolute;
        left: 50%;
        margin-left: -472px;
        top: 250px;
      }
      #content > .list > .team .team3 ul {
        position: relative;
        height: 100%;
      }
      #content > .list > .team .team3 ul > li:nth-child(1) {
        background-position: 0, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(2) {
        background-position: -118px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(3) {
        background-position: -236px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(4) {
        background-position: -354px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(5) {
        background-position: -472px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(6) {
        background-position: -590px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(7) {
        background-position: -708px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(8) {
        background-position: -826px, 0;
      }
      #content > .list > .team canvas {
        position: absolute;
        top: 0px;
      }

      /*第五屏 end*/

      /*小圆点*/
      #content > .dot {
        position: fixed;
        right: 10px;
        top: 50%;
      }
      #content > .dot > li {
        width: 10px;
        height: 10px;
        border: 5px solid pink;
        margin-top: 10px;
        border-radius: 50%;
      }
      #content > .dot > li.active {
        background: white;
      }

      /*内容区样式 结束*/

      /*出入场*/
      #content > .list > .home .home1,
      #content > .list > .home .home2 {
        transition: 1s transform, 1s opacity;
      }
      #content > .list > .about .about3 > .item,
      #content > .list > .team .team1,
      #content > .list > .team .team2 {
        transition: 1s transform;
      }

      /*音频*/

      /*开机动画*/
      #mask {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 100;
      }
      #mask .up {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
      }
      #mask .down {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
        position: absolute;
        bottom: 0;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      #wrap {
        height: 100%;
      }
      html,
      body,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      li {
        margin: 0px;
        padding: 0px;
        font: 14px "微软雅黑";
      }
      a {
        text-decoration: none;
        display: block;
      }
      li {
        list-style: none;
      }
      img {
        display: block;
      }
      /*css reset 结束*/

      /*common css 开始*/
      .clearfix {
        *zoom: 1;
      }
      .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
      .commonTitle {
        color: #009ee0;
        font-size: 80px;
        line-height: 0.8;
        font-weight: bold;
        letter-spacing: -5px;
      }
      .commonText {
        color: white;
        line-height: 1.5;
        font-size: 15px;
      }
      /*common css 结束*/

      /*头部样式 开始*/
      #head {
        background: white !important;
        width: 100%;
      }
      #head .headMain {
        width: 1100px;
        height: 80px;
        margin: 0 auto;
        position: relative;
      }
      #head .headMain > .logo {
        float: left;
        margin-top: 30px;
      }
      #head .headMain > .nav {
        float: right;
        margin-top: 50px;
      }
      #head .headMain > .nav > .list > li {
        float: left;
        margin-left: 40px;
        position: relative;
      }
      #head .headMain > .nav > .list > li .up {
        color: #000000;
        position: absolute;
        width: 0;
        overflow: hidden;
        transition: 1s width;
      }
      #head .headMain > .nav > .list > li:hover .up {
        width: 100%;
      }

      /*头部样式 结束*/

      /*内容区样式 开始*/
      #content {
        background: gray;
        position: relative;
        overflow: hidden;
        width: 100%;
      }
      #content > .list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transition: 1s top;
      }
      #content > .list > li {
        position: relative;
        background-position: 50% 50% !important;
        overflow: hidden;
      }
      #content > .list > li > section {
        width: 1100px;
        height: 520px;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
      /*第三屏 start*/
      #content > .list > .works .works1 {
        margin: 50px 0px 100px 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 {
        margin-left: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 > .item {
        float: left;
        width: 220px;
        height: 133px;
        margin: 0 1px;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .works .works2 > .item:last-of-type {
        width: 332px;
      }

      #content > .list > .works .works2 > .item .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        padding: 10px;
        background: #000000;
        opacity: 0;
        color: white;
        transition: 1s opacity;
      }
      #content > .list > .works .works2 > .item .mask .icon {
        width: 32px;
        height: 34px;
        margin: 0 auto;
        margin-top: 10px;
        transition: 1s background-position;
      }
      #content > .list > .works .works2 > .item img {
        transition: 1s transform;
      }

      #content > .list > .works .works2 > .item .mask .icon:hover {
        background-position: 0 -35px;
      }
      #content > .list > .works .works2 > .item:hover .mask {
        opacity: 0.8;
      }
      #content > .list > .works .works2 > .item:hover img {
        transform: rotate(30deg) scale(1.5);
      }

      @keyframes works3Move {
        0% {
          transform: translateX(0px) rotateY(0deg);
        }
        49% {
          transform: translateX(-490px) rotateY(0deg);
        }
        50% {
          transform: translateX(-500px) rotateY(180deg);
        }
        100% {
          transform: translateX(0px) rotateY(180deg);
        }
      }
      /*第三屏 end*/

      /*第二屏 start*/
      #content > .list > .course .course1 {
        margin: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course2 {
        margin-left: 50px;
        width: 400px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course3 {
        width: 480px;
        position: absolute;
        z-index: 2;
        right: 50px;
        top: 70px;
      }

      #content > .list > .course .course3 .line {
        position: absolute;
        top: -7px;
        width: 9px;
        height: 410px;
      }

      #content > .list > .course .course3 .line:nth-of-type(1) {
        left: -5px;
      }
      #content > .list > .course .course3 .line:nth-of-type(2) {
        left: 115px;
      }
      #content > .list > .course .course3 .line:nth-of-type(3) {
        left: 235px;
      }
      #content > .list > .course .course3 .line:nth-of-type(4) {
        left: 355px;
      }
      #content > .list > .course .course3 .line:nth-of-type(5) {
        left: 475px;
      }

      #content > .list > .course .course3 .item {
        float: left;
        width: 120px;
        height: 132px;
        position: relative;
        perspective: 500px;
        transform-style: preserve-3d;
      }
      #content > .list > .course .course3 .item .face,
      #content > .list > .course .course3 .item .backFace {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 15px;
        transition: 1s transform;
      }

      #content > .list > .course .course3 .item .backFace {
        background-position: 50% 50% !important;
      }

      #content > .list > .course .course3 .item:hover .face {
        transform: rotateY(360deg);
      }
      #content > .list > .course .course3 .item:hover .backFace {
        transform: rotateY(180deg);
      }
      /*第二屏 end*/

      /*第一屏 start*/
      #content > .list > .home .home1 {
        width: 100%;
        height: 100%;
        perspective: 1000px;
        transform-style: preserve-3d;
      }
      #content > .list > .home .home1 > li {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        visibility: hidden;
      }
      #content > .list > .home .home1 > li:nth-child(1) {
        background: #dc6c5f;
      }
      #content > .list > .home .home1 > li:nth-child(2) {
        background: #95dc84;
      }
      #content > .list > .home .home1 > li:nth-child(3) {
        background: #64b9d2;
      }
      #content > .list > .home .home1 > li:nth-child(4) {
        background: #000000;
      }
      #content > .list > .home .home1 > li > div {
        color: white;
        text-align: center;
        margin-top: 200px;
      }
      #content > .list > .home .home1 > li.active {
        visibility: visible;
      }

      #content > .list > .home .home2 {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
      }
      #content > .list > .home .home2 > li {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.5);
        display: inline-block;
        box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
        cursor: pointer;
      }
      #content > .list > .home .home2 > li.active {
        background: white;
        cursor: default;
      }

      /*从左往右 leftHide  rightShow*/
      #content > .list > .home .home1 > li.leftHide {
        visibility: hidden;
        animation: 1s leftHide 1 linear;
      }
      #content > .list > .home .home1 > li.rightShow {
        visibility: visible;
        animation: 1s rightShow 1 linear;
      }
      @keyframes leftHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }
      @keyframes rightShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
        }
      }
      /*从右往左 leftShow  rightHide*/
      #content > .list > .home .home1 > li.leftShow {
        visibility: visible;
        animation: 1s leftShow 1 linear;
      }
      #content > .list > .home .home1 > li.rightHide {
        visibility: hidden;
        animation: 1s rightHide 1 linear;
      }
      @keyframes leftShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
        }
      }
      @keyframes rightHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }

      /*第一屏 end*/
      /*第四屏 strat*/
      #content > .list > .about .about1 {
        margin: 50px 0 100px 50px;
      }
      #content > .list > .about .about2 {
        margin-left: 50px;
        width: 400px;
      }
      #content > .list > .about .about3 > .item {
        width: 260px;
        height: 200px;
        border: 5px solid rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        position: absolute;
        z-index: 2;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item:nth-child(1) {
        left: 750px;
        top: 50px;
      }
      #content > .list > .about .about3 > .item:nth-child(2) {
        left: 600px;
        top: 290px;
      }

      #content > .list > .about .about3 > .item > span,
      #content > .list > .about .about3 > .item > ul {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      #content > .list > .about .about3 > .item:hover span {
        transform: scale(1);
      }

      #content > .list > .about .about3 > .item > ul > li {
        float: left;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item > ul > li > img {
        position: absolute;
        transition: 1s top, 1s left;
      }

      /*第四屏 end*/
      /*第五屏 strat*/
      #content > .list > .team .team1 {
        width: 400px;
        margin: 50px;
        float: left;
      }
      #content > .list > .team .team2 {
        width: 400px;
        margin: 50px;
        float: right;
      }
      #content > .list > .team .team3 {
        width: 944px;
        height: 448px;
        position: absolute;
        left: 50%;
        margin-left: -472px;
        top: 250px;
      }
      #content > .list > .team .team3 ul {
        position: relative;
        height: 100%;
      }
      #content > .list > .team .team3 ul > li:nth-child(1) {
        background-position: 0, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(2) {
        background-position: -118px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(3) {
        background-position: -236px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(4) {
        background-position: -354px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(5) {
        background-position: -472px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(6) {
        background-position: -590px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(7) {
        background-position: -708px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(8) {
        background-position: -826px, 0;
      }
      #content > .list > .team canvas {
        position: absolute;
        top: 0px;
      }

      /*第五屏 end*/

      /*小圆点*/
      #content > .dot {
        position: fixed;
        right: 10px;
        top: 50%;
      }
      #content > .dot > li {
        width: 10px;
        height: 10px;
        border: 5px solid pink;
        margin-top: 10px;
        border-radius: 50%;
      }
      #content > .dot > li.active {
        background: white;
      }

      /*内容区样式 结束*/

      /*出入场*/
      #content > .list > .home .home1,
      #content > .list > .home .home2 {
        transition: 1s transform, 1s opacity;
      }
      #content > .list > .about .about3 > .item,
      #content > .list > .team .team1,
      #content > .list > .team .team2 {
        transition: 1s transform;
      }

      /*音频*/

      /*开机动画*/
      #mask {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 100;
      }
      #mask .up {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
      }
      #mask .down {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
        position: absolute;
        bottom: 0;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      #wrap {
        height: 100%;
      }
      html,
      body,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      li {
        margin: 0px;
        padding: 0px;
        font: 14px "微软雅黑";
      }
      a {
        text-decoration: none;
        display: block;
      }
      li {
        list-style: none;
      }
      img {
        display: block;
      }
      /*css reset 结束*/

      /*common css 开始*/
      .clearfix {
        *zoom: 1;
      }
      .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
      .commonTitle {
        color: #009ee0;
        font-size: 80px;
        line-height: 0.8;
        font-weight: bold;
        letter-spacing: -5px;
      }
      .commonText {
        color: white;
        line-height: 1.5;
        font-size: 15px;
      }
      /*common css 结束*/

      /*头部样式 开始*/
      #head {
        background: white !important;
        width: 100%;
      }
      #head .headMain {
        width: 1100px;
        height: 80px;
        margin: 0 auto;
        position: relative;
      }
      #head .headMain > .logo {
        float: left;
        margin-top: 30px;
      }
      #head .headMain > .nav {
        float: right;
        margin-top: 50px;
      }
      #head .headMain > .nav > .list > li {
        float: left;
        margin-left: 40px;
        position: relative;
      }
      #head .headMain > .nav > .list > li .up {
        color: #000000;
        position: absolute;
        width: 0;
        overflow: hidden;
        transition: 1s width;
      }
      #head .headMain > .nav > .list > li:hover .up {
        width: 100%;
      }

      /*头部样式 结束*/

      /*内容区样式 开始*/
      #content {
        background: gray;
        position: relative;
        overflow: hidden;
        width: 100%;
      }
      #content > .list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transition: 1s top;
      }
      #content > .list > li {
        position: relative;
        background-position: 50% 50% !important;
        overflow: hidden;
      }
      #content > .list > li > section {
        width: 1100px;
        height: 520px;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
      /*第三屏 start*/
      #content > .list > .works .works1 {
        margin: 50px 0px 100px 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 {
        margin-left: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 > .item {
        float: left;
        width: 220px;
        height: 133px;
        margin: 0 1px;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .works .works2 > .item:last-of-type {
        width: 332px;
      }

      #content > .list > .works .works2 > .item .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        padding: 10px;
        background: #000000;
        opacity: 0;
        color: white;
        transition: 1s opacity;
      }
      #content > .list > .works .works2 > .item .mask .icon {
        width: 32px;
        height: 34px;
        margin: 0 auto;
        margin-top: 10px;
        transition: 1s background-position;
      }
      #content > .list > .works .works2 > .item img {
        transition: 1s transform;
      }

      #content > .list > .works .works2 > .item .mask .icon:hover {
        background-position: 0 -35px;
      }
      #content > .list > .works .works2 > .item:hover .mask {
        opacity: 0.8;
      }
      #content > .list > .works .works2 > .item:hover img {
        transform: rotate(30deg) scale(1.5);
      }

      @keyframes works3Move {
        0% {
          transform: translateX(0px) rotateY(0deg);
        }
        49% {
          transform: translateX(-490px) rotateY(0deg);
        }
        50% {
          transform: translateX(-500px) rotateY(180deg);
        }
        100% {
          transform: translateX(0px) rotateY(180deg);
        }
      }
      /*第三屏 end*/

      /*第二屏 start*/
      #content > .list > .course .course1 {
        margin: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course2 {
        margin-left: 50px;
        width: 400px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course3 {
        width: 480px;
        position: absolute;
        z-index: 2;
        right: 50px;
        top: 70px;
      }

      #content > .list > .course .course3 .line {
        position: absolute;
        top: -7px;
        width: 9px;
        height: 410px;
      }

      #content > .list > .course .course3 .line:nth-of-type(1) {
        left: -5px;
      }
      #content > .list > .course .course3 .line:nth-of-type(2) {
        left: 115px;
      }
      #content > .list > .course .course3 .line:nth-of-type(3) {
        left: 235px;
      }
      #content > .list > .course .course3 .line:nth-of-type(4) {
        left: 355px;
      }
      #content > .list > .course .course3 .line:nth-of-type(5) {
        left: 475px;
      }

      #content > .list > .course .course3 .item {
        float: left;
        width: 120px;
        height: 132px;
        position: relative;
        perspective: 500px;
        transform-style: preserve-3d;
      }
      #content > .list > .course .course3 .item .face,
      #content > .list > .course .course3 .item .backFace {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 15px;
        transition: 1s transform;
      }

      #content > .list > .course .course3 .item .backFace {
        background-position: 50% 50% !important;
      }

      #content > .list > .course .course3 .item:hover .face {
        transform: rotateY(360deg);
      }
      #content > .list > .course .course3 .item:hover .backFace {
        transform: rotateY(180deg);
      }
      /*第二屏 end*/

      /*第一屏 start*/
      #content > .list > .home .home1 {
        width: 100%;
        height: 100%;
        perspective: 1000px;
        transform-style: preserve-3d;
      }
      #content > .list > .home .home1 > li {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        visibility: hidden;
      }
      #content > .list > .home .home1 > li:nth-child(1) {
        background: #dc6c5f;
      }
      #content > .list > .home .home1 > li:nth-child(2) {
        background: #95dc84;
      }
      #content > .list > .home .home1 > li:nth-child(3) {
        background: #64b9d2;
      }
      #content > .list > .home .home1 > li:nth-child(4) {
        background: #000000;
      }
      #content > .list > .home .home1 > li > div {
        color: white;
        text-align: center;
        margin-top: 200px;
      }
      #content > .list > .home .home1 > li.active {
        visibility: visible;
      }

      #content > .list > .home .home2 {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
      }
      #content > .list > .home .home2 > li {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.5);
        display: inline-block;
        box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
        cursor: pointer;
      }
      #content > .list > .home .home2 > li.active {
        background: white;
        cursor: default;
      }

      /*从左往右 leftHide  rightShow*/
      #content > .list > .home .home1 > li.leftHide {
        visibility: hidden;
        animation: 1s leftHide 1 linear;
      }
      #content > .list > .home .home1 > li.rightShow {
        visibility: visible;
        animation: 1s rightShow 1 linear;
      }
      @keyframes leftHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }
      @keyframes rightShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
        }
      }
      /*从右往左 leftShow  rightHide*/
      #content > .list > .home .home1 > li.leftShow {
        visibility: visible;
        animation: 1s leftShow 1 linear;
      }
      #content > .list > .home .home1 > li.rightHide {
        visibility: hidden;
        animation: 1s rightHide 1 linear;
      }
      @keyframes leftShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
        }
      }
      @keyframes rightHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }

      /*第一屏 end*/
      /*第四屏 strat*/
      #content > .list > .about .about1 {
        margin: 50px 0 100px 50px;
      }
      #content > .list > .about .about2 {
        margin-left: 50px;
        width: 400px;
      }
      #content > .list > .about .about3 > .item {
        width: 260px;
        height: 200px;
        border: 5px solid rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        position: absolute;
        z-index: 2;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item:nth-child(1) {
        left: 750px;
        top: 50px;
      }
      #content > .list > .about .about3 > .item:nth-child(2) {
        left: 600px;
        top: 290px;
      }

      #content > .list > .about .about3 > .item > span,
      #content > .list > .about .about3 > .item > ul {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      #content > .list > .about .about3 > .item:hover span {
        transform: scale(1);
      }

      #content > .list > .about .about3 > .item > ul > li {
        float: left;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item > ul > li > img {
        position: absolute;
        transition: 1s top, 1s left;
      }

      /*第四屏 end*/
      /*第五屏 strat*/
      #content > .list > .team .team1 {
        width: 400px;
        margin: 50px;
        float: left;
      }
      #content > .list > .team .team2 {
        width: 400px;
        margin: 50px;
        float: right;
      }
      #content > .list > .team .team3 {
        width: 944px;
        height: 448px;
        position: absolute;
        left: 50%;
        margin-left: -472px;
        top: 250px;
      }
      #content > .list > .team .team3 ul {
        position: relative;
        height: 100%;
      }
      #content > .list > .team .team3 ul > li:nth-child(1) {
        background-position: 0, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(2) {
        background-position: -118px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(3) {
        background-position: -236px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(4) {
        background-position: -354px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(5) {
        background-position: -472px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(6) {
        background-position: -590px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(7) {
        background-position: -708px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(8) {
        background-position: -826px, 0;
      }
      #content > .list > .team canvas {
        position: absolute;
        top: 0px;
      }

      /*第五屏 end*/

      /*小圆点*/
      #content > .dot {
        position: fixed;
        right: 10px;
        top: 50%;
      }
      #content > .dot > li {
        width: 10px;
        height: 10px;
        border: 5px solid pink;
        margin-top: 10px;
        border-radius: 50%;
      }
      #content > .dot > li.active {
        background: white;
      }

      /*内容区样式 结束*/

      /*出入场*/
      #content > .list > .home .home1,
      #content > .list > .home .home2 {
        transition: 1s transform, 1s opacity;
      }
      #content > .list > .about .about3 > .item,
      #content > .list > .team .team1,
      #content > .list > .team .team2 {
        transition: 1s transform;
      }

      /*音频*/

      /*开机动画*/
      #mask {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 100;
      }
      #mask .up {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
      }
      #mask .down {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
        position: absolute;
        bottom: 0;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      #wrap {
        height: 100%;
      }
      html,
      body,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      li {
        margin: 0px;
        padding: 0px;
        font: 14px "微软雅黑";
      }
      a {
        text-decoration: none;
        display: block;
      }
      li {
        list-style: none;
      }
      img {
        display: block;
      }
      /*css reset 结束*/

      /*common css 开始*/
      .clearfix {
        *zoom: 1;
      }
      .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
      .commonTitle {
        color: #009ee0;
        font-size: 80px;
        line-height: 0.8;
        font-weight: bold;
        letter-spacing: -5px;
      }
      .commonText {
        color: white;
        line-height: 1.5;
        font-size: 15px;
      }
      /*common css 结束*/

      /*头部样式 开始*/
      #head {
        background: white !important;
        width: 100%;
      }
      #head .headMain {
        width: 1100px;
        height: 80px;
        margin: 0 auto;
        position: relative;
      }
      #head .headMain > .logo {
        float: left;
        margin-top: 30px;
      }
      #head .headMain > .nav {
        float: right;
        margin-top: 50px;
      }
      #head .headMain > .nav > .list > li {
        float: left;
        margin-left: 40px;
        position: relative;
      }
      #head .headMain > .nav > .list > li .up {
        color: #000000;
        position: absolute;
        width: 0;
        overflow: hidden;
        transition: 1s width;
      }
      #head .headMain > .nav > .list > li:hover .up {
        width: 100%;
      }

      /*头部样式 结束*/

      /*内容区样式 开始*/
      #content {
        background: gray;
        position: relative;
        overflow: hidden;
        width: 100%;
      }
      #content > .list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        transition: 1s top;
      }
      #content > .list > li {
        position: relative;
        background-position: 50% 50% !important;
        overflow: hidden;
      }
      #content > .list > li > section {
        width: 1100px;
        height: 520px;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
      /*第三屏 start*/
      #content > .list > .works .works1 {
        margin: 50px 0px 100px 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 {
        margin-left: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .works .works2 > .item {
        float: left;
        width: 220px;
        height: 133px;
        margin: 0 1px;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .works .works2 > .item:last-of-type {
        width: 332px;
      }

      #content > .list > .works .works2 > .item .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        padding: 10px;
        background: #000000;
        opacity: 0;
        color: white;
        transition: 1s opacity;
      }
      #content > .list > .works .works2 > .item .mask .icon {
        width: 32px;
        height: 34px;
        margin: 0 auto;
        margin-top: 10px;
        transition: 1s background-position;
      }
      #content > .list > .works .works2 > .item img {
        transition: 1s transform;
      }

      #content > .list > .works .works2 > .item .mask .icon:hover {
        background-position: 0 -35px;
      }
      #content > .list > .works .works2 > .item:hover .mask {
        opacity: 0.8;
      }
      #content > .list > .works .works2 > .item:hover img {
        transform: rotate(30deg) scale(1.5);
      }

      @keyframes works3Move {
        0% {
          transform: translateX(0px) rotateY(0deg);
        }
        49% {
          transform: translateX(-490px) rotateY(0deg);
        }
        50% {
          transform: translateX(-500px) rotateY(180deg);
        }
        100% {
          transform: translateX(0px) rotateY(180deg);
        }
      }
      /*第三屏 end*/

      /*第二屏 start*/
      #content > .list > .course .course1 {
        margin: 50px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course2 {
        margin-left: 50px;
        width: 400px;
        position: relative;
        z-index: 2;
      }
      #content > .list > .course .course3 {
        width: 480px;
        position: absolute;
        z-index: 2;
        right: 50px;
        top: 70px;
      }

      #content > .list > .course .course3 .line {
        position: absolute;
        top: -7px;
        width: 9px;
        height: 410px;
      }

      #content > .list > .course .course3 .line:nth-of-type(1) {
        left: -5px;
      }
      #content > .list > .course .course3 .line:nth-of-type(2) {
        left: 115px;
      }
      #content > .list > .course .course3 .line:nth-of-type(3) {
        left: 235px;
      }
      #content > .list > .course .course3 .line:nth-of-type(4) {
        left: 355px;
      }
      #content > .list > .course .course3 .line:nth-of-type(5) {
        left: 475px;
      }

      #content > .list > .course .course3 .item {
        float: left;
        width: 120px;
        height: 132px;
        position: relative;
        perspective: 500px;
        transform-style: preserve-3d;
      }
      #content > .list > .course .course3 .item .face,
      #content > .list > .course .course3 .item .backFace {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 15px;
        transition: 1s transform;
      }

      #content > .list > .course .course3 .item .backFace {
        background-position: 50% 50% !important;
      }

      #content > .list > .course .course3 .item:hover .face {
        transform: rotateY(360deg);
      }
      #content > .list > .course .course3 .item:hover .backFace {
        transform: rotateY(180deg);
      }
      /*第二屏 end*/

      /*第一屏 start*/
      #content > .list > .home .home1 {
        width: 100%;
        height: 100%;
        perspective: 1000px;
        transform-style: preserve-3d;
      }
      #content > .list > .home .home1 > li {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        visibility: hidden;
      }
      #content > .list > .home .home1 > li:nth-child(1) {
        background: #dc6c5f;
      }
      #content > .list > .home .home1 > li:nth-child(2) {
        background: #95dc84;
      }
      #content > .list > .home .home1 > li:nth-child(3) {
        background: #64b9d2;
      }
      #content > .list > .home .home1 > li:nth-child(4) {
        background: #000000;
      }
      #content > .list > .home .home1 > li > div {
        color: white;
        text-align: center;
        margin-top: 200px;
      }
      #content > .list > .home .home1 > li.active {
        visibility: visible;
      }

      #content > .list > .home .home2 {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
      }
      #content > .list > .home .home2 > li {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.5);
        display: inline-block;
        box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
        cursor: pointer;
      }
      #content > .list > .home .home2 > li.active {
        background: white;
        cursor: default;
      }

      /*从左往右 leftHide  rightShow*/
      #content > .list > .home .home1 > li.leftHide {
        visibility: hidden;
        animation: 1s leftHide 1 linear;
      }
      #content > .list > .home .home1 > li.rightShow {
        visibility: visible;
        animation: 1s rightShow 1 linear;
      }
      @keyframes leftHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }
      @keyframes rightShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
        }
      }
      /*从右往左 leftShow  rightHide*/
      #content > .list > .home .home1 > li.leftShow {
        visibility: visible;
        animation: 1s leftShow 1 linear;
      }
      #content > .list > .home .home1 > li.rightHide {
        visibility: hidden;
        animation: 1s rightHide 1 linear;
      }
      @keyframes leftShow {
        0% {
          visibility: hidden;
          transform: translateZ(-200px);
        }
        50% {
          transform: translateX(-40%) rotateY(30deg) scale(0.8);
        }
        100% {
        }
      }
      @keyframes rightHide {
        0% {
          visibility: visible;
        }
        50% {
          transform: translateX(40%) rotateY(-30deg) scale(0.8);
        }
        100% {
          transform: translateZ(-200px);
        }
      }

      /*第一屏 end*/
      /*第四屏 strat*/
      #content > .list > .about .about1 {
        margin: 50px 0 100px 50px;
      }
      #content > .list > .about .about2 {
        margin-left: 50px;
        width: 400px;
      }
      #content > .list > .about .about3 > .item {
        width: 260px;
        height: 200px;
        border: 5px solid rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        position: absolute;
        z-index: 2;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item:nth-child(1) {
        left: 750px;
        top: 50px;
      }
      #content > .list > .about .about3 > .item:nth-child(2) {
        left: 600px;
        top: 290px;
      }

      #content > .list > .about .about3 > .item > span,
      #content > .list > .about .about3 > .item > ul {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      #content > .list > .about .about3 > .item:hover span {
        transform: scale(1);
      }

      #content > .list > .about .about3 > .item > ul > li {
        float: left;
        position: relative;
        overflow: hidden;
      }
      #content > .list > .about .about3 > .item > ul > li > img {
        position: absolute;
        transition: 1s top, 1s left;
      }

      /*第四屏 end*/
      /*第五屏 strat*/
      #content > .list > .team .team1 {
        width: 400px;
        margin: 50px;
        float: left;
      }
      #content > .list > .team .team2 {
        width: 400px;
        margin: 50px;
        float: right;
      }
      #content > .list > .team .team3 {
        width: 944px;
        height: 448px;
        position: absolute;
        left: 50%;
        margin-left: -472px;
        top: 250px;
      }
      #content > .list > .team .team3 ul {
        position: relative;
        height: 100%;
      }
      #content > .list > .team .team3 ul > li:nth-child(1) {
        background-position: 0, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(2) {
        background-position: -118px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(3) {
        background-position: -236px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(4) {
        background-position: -354px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(5) {
        background-position: -472px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(6) {
        background-position: -590px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(7) {
        background-position: -708px, 0;
      }
      #content > .list > .team .team3 ul > li:nth-child(8) {
        background-position: -826px, 0;
      }
      #content > .list > .team canvas {
        position: absolute;
        top: 0px;
      }

      /*第五屏 end*/

      /*小圆点*/
      #content > .dot {
        position: fixed;
        right: 10px;
        top: 50%;
      }
      #content > .dot > li {
        width: 10px;
        height: 10px;
        border: 5px solid pink;
        margin-top: 10px;
        border-radius: 50%;
      }
      #content > .dot > li.active {
        background: white;
      }

      /*内容区样式 结束*/

      /*出入场*/
      #content > .list > .home .home1,
      #content > .list > .home .home2 {
        transition: 1s transform, 1s opacity;
      }
      #content > .list > .about .about3 > .item,
      #content > .list > .team .team1,
      #content > .list > .team .team2 {
        transition: 1s transform;
      }

      /*音频*/

      /*开机动画*/
      #mask {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 100;
      }
      #mask .up {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
      }
      #mask .down {
        width: 100%;
        height: 50%;
        background: deepskyblue;
        transition: 1s height;
        position: absolute;
        bottom: 0;
      }
      .myfont{
        font-size: 50px;
      }
    </style>
  </head>
  <body>
    <!--
      1.inner style 标签中的样式由 html 解析器进行解析。html parse 是回来一点数据，就异步启动解析，资源还是继续加载。
      2.浏览器加载资源是异步的。其实所有资源加载都是异步的。
      3.页面 style 标签写的内部样式是异步解析的。
  三个概念：加载、解析、渲染
      加载异步、解析异步、渲染异步
    -->
    <!-- <div class="myfont">我们看看字体会不会闪</div> -->
    <img src="img/01.jpg" />
  </body>
</html>
